TouchableOpacity is not working in MapBoxGL

user_12900092 0
Viewed 202

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",
mapbox-marker mapbox-gl mapbox-gl-js mapbox react-native
1 Answers

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

From the GitHub docs If you need interactive views please use MarkerView, as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.

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.

user_82638820
Related