TouchableOpacity is not working in MapBoxGL

Question

I have used MapBoxGL in my expo ejected project. i want to use my custom component at map PointAnnonation.

I have added custom icon too. But what i want is to navigate on touch of that i cont to different screen. So i wrapped whole MapboxGL.PointAnnotation 's child in TouchaleOpacity but it does not work while tapping on it.

<MapboxGL.MapView
                    style={styles.map}
                    logoEnabled={false}
                    localizeLabels={true}
                >
                    <MapboxGL.Camera
                        zoomLevel={15}
                        animationMode={'flyTo'}
                        animationDuration={1100}
                        centerCoordinate={[73.20812, 22.29941]}
                    />
                    <View>
                        <MapboxGL.PointAnnotation coordinate={[73.20812, 22.29941]}>
                            <TouchableOpacity onPress={() => Alert.alert('hello')}>
                                <Entypo
                                    name='location-pin'
                                    size={50}
                                    color='black'
                                    onPress={() => Alert.alert('h')}
                                />
                            </TouchableOpacity>
                        </MapboxGL.PointAnnotation>
                    </View>
                </MapboxGL.MapView>

Dependencies :

    "@react-native-mapbox-gl/maps": "^8.1.0-rc.9",
    "react-native": "~0.62.2",

Answer 1

I also faced this issue. TouchableOpacity doesn't work with MapboxGL.PointAnnotation, but it works with MapboxGL.MarkerView.

For handle click in PointAnnotation you can try to use onSelected prop. Such as I do here:

<MapboxGL.PointAnnotation
  id={uuid4()}
  onSelected={handleClick}
  key={name}
  coordinate={[longitude, latitude]}>
    <TouchableOpacity>
      <EntypoIcon name="location-pin" color="red" size={40} />
    </TouchableOpacity>
</MapboxGL.PointAnnotation>

It will work with some delay and without opacity animation.