Implement gestureHandling "cooperative" (two fingers to pan) to React-Native-Maps

Question

How would I implement a feature in which a user must use two fingers to pan the map with react-native-maps? It appears they do not have gestureHandling as a feature. I don't necessarily need a full answer, just some ideas to point me in the right direction. I also don't see very comprehensive gesture library other than the basic onPress.

https://github.com/react-community/react-native-maps/blob/master/docs/mapview.md

Antihelix

Answer 1

I had the same issue that I wanted:

• Disabling one-finger panning on map
• Enabling two-finger panning/zooming on map

For that you you can use this configuration:

<MapboxGL.MapView
        style={[styles.map, style]}
        styleURL={styleURL}
        logoEnabled={false}
        attributionEnabled={false}
        scrollEnabled={false} // <-- Disables one-finger panning
        pitchEnabled={false} // <--- Enable two-finger zooming + panning
        rotateEnabled={false}

      >
// ....
</MapboxGL.MapView>

Note to make this work it is important how you interact with two-finger. For instance, if you put your two fingers horizontally and start moving up/down (without any pitching) it starts changing the map perspective, instead of panning.

So make sure after putting your two fingers, you begins right away with a bit of pitch (=zooming) and then moving around your fingers make panning effect occurs.

Hinterland