TouchableOpacity not clickable when above a MapView with backgroundColor

user_10963473 0
Viewed 1291

I am having a problem with the TouchableOpacity and react-native-maps.

I have a View with a MapView and a View, with an absolute positioned TouchableOpacity inside, like the code below:

<View style={{ flex: 1, flexDirection: 'column-reverse' }}>
  <MapView style={{ flex: 1 }} />
  <View style={{ height: 55 }}>
    <TouchableOpacity style={{ position: 'absolute', top: 100 }}>
      <Text>Button</Text>
    </TouchableOpacity>
  </View>
</View>

When I click over the TouchableOpacity in this case, it works as intended, but I need my inside View to have a white background color, like this:

<View style={{ flex: 1, flexDirection: 'column-reverse' }}>
  <MapView style={{ flex: 1 }} />
  <View style={{ height: 55, backgroundColor: '#ffffff' }}>
    <TouchableOpacity style={{ position: 'absolute', top: 100 }}>
      <Text>Button</Text>
    </TouchableOpacity>
  </View>
</View>

But as soon as I place the backgroundColor tag in the style, the TouchableOpacity stops working at all, and all clicks above the MapView are actually seen as clicks in the map itself.

Anyone has any clue of how to solve that? I really need to have a background in the View, so it is not possible to remove that.

react-native-maps react-native
2 Answers

Try placing the view inside the TouchableOpacity.

<View style={{ flex: 1, flexDirection: 'column-reverse' }}>
  <MapView style={{ flex: 1 }} />
  <TouchableOpacity style={{ position: 'absolute', top: 100 }}>
      <View style={{ height: 55, backgroundColor: '#ffffff' }}>
          <Text>Button</Text>
      </View>
  </TouchableOpacity>
</View>
user_55631910

Found a solution for myself. If you import TouchableOpacity, dont do:

import { TouchableOpacity } from "react-native-gesture-handler";

but rather do:

import {TouchableOpacity} from 'react-native';

After that you just place the TouchableOpacity directly underneath the MapView as I did it here:

         <View style={styles.container}>
            <MapView 
                style={styles.map}
                zoomEnabled = {true}
                maxZoomLevel={10}
                rotateEnabled={false}
                loadingEnabled={true}
                onPress={e => {
                    console.log(e.nativeEvent.coordinate);
                    handleMapPress(e.nativeEvent.coordinate);
                }}
            />
            <TouchableOpacity style={{position: "absolute", bottom: "90%", left:"5%"}}>
                <AntDesign name="caretleft" size={40} color="orange"/>     
            </TouchableOpacity>
        </View>

You can also place multiple components overlaying the MapView, just make sure to place them underneath the MapView but inside your main View which is wrapping everything up.

If you want to position items overlaying MapView do it with props like that:

style={{position: "absolute", bottom: "90%", left:"5%"}}

right, left, bottom, top are to position your component overlaying MapView. I found using "%" definition very good for this purpose because it fits your screen dynamicly depending on the size of your devices display.

user_109003540
Related