Bug with react-native-maps

[compojoom]

I posted this in the react-navigation repository: https://github.com/react-navigation/react-navigation/issues/5594 but after inspecting their code I see that the problem comes from the PanGestureHandler in this repository.

I have a reproducible demo over here: https://github.com/compojoom/rnMapsNavigationBug/tree/gesture_hangler

Even though I've set the PanGestureHandler enabled=false, after dragging the marker on the map one can't press the button on the bottom. You have to drag the map and afterwards the button can be pressed again. If there is no panGestureHandler the whole view behaves correctly after dragging.

[compojoom]

@kmagiera @osdnk - any ideas how to fix this?

In the react-navigation thread @eriveltonelias posted a snack with the issue: https://snack.expo.io/@eriveltonelias/maps-react-navigation

It clearly demonstrates that whenever one interacts with the marker of the map, one can't press any button on the screen afterwards.

[brentvatne]

hi there! I was able to reproduce this without navigation at all: https://snack.expo.io/@notbrent/map-touchables

see the text in the snack for more information on how to verify it. i also tried this locally with the latest version of rngh and the issue remains. it appears that, as far as rngh is concerned, the pin dragging gesture remains active even after the user drops the pin, and it only stops when the user pans on the mapview again. while the gesture is active, rngh is cancelling gestures from the rn responder system. if you remove the PanGestureHandler that wraps the map and buttons then this issue will not occur. cc @kmagiera @osdnk

[compojoom]

@brentvatne - but one isn't able to remove the panGestureHandler when using that together with reactnavigation?

And also why is it working with the Borderless button?

[osdnk]

I see that they're using UIPanGestureRecognizer beneath so it might be related https://github.com/react-native-community/react-native-maps/blob/6c225af612d4681a00d4849b60774d7c6426835e/lib/ios/AirGoogleMaps/AIRGoogleMapManager.m#L55

[compojoom]

I just updated the reproduction repository with rn-gesture-handler 1.1.0 and rn-maps 0.24-rc1(from github) https://github.com/compojoom/rnMapsNavigationBug/tree/gesture_hangler

Problem remains. After moving the marker, one can't press any buttons until map is moved again.

[osdnk]

Sorry, didn’t want to close

[IAmMarcellus]

@osdnk Any efficient workaround for this?

I'm using react navigation and react native maps, so when using the panGestureHandler to respond to the user moving the map caused issues, I tried disabling gestures in React Navigation and using onMoveShouldSetResponder from the Gesture Responder System, however, that doesn't work with react native maps either (works on Android but not on iOS [the responder event never fires]). This issue is also discussed in https://github.com/react-native-community/react-native-maps/issues/1038, but no efficient solution is presented.

Could this be related to https://github.com/kmagiera/react-native-gesture-handler/issues/255? Maybe disabling gestures in the React Navigation doesn't disable the panGestureHandler, causing onMoveShouldSetResponder to never fire, as RNGH is still handling that gesture. The creator of that issue didn't test it on Android, so the issue of the panGestureHandler not disabling could be isolated to iOS, which would explain why onMoveShouldSetResponder works on Android. Just a theory though.

[compojoom]

This Bug is ios only. On android it works fine. My workaround is to still use react navigation v2 :( :( :(

[luispeerez]

Same problem here, using RN 0.55.4, React-navigation 3.10.1 and react native maps 0.24.2 Will try @compojoom workaround and downgrade to react navigation 2

[grifotv]

Same here, I can confirm it's iOS only.

[compojoom]

@osdnk - I'm starting to think that this is not related to react-native-maps, but to the google maps sdk.

I commented out this code: https://github.com/react-native-community/react-native-maps/blob/6c225af612d4681a00d4849b60774d7c6426835e/lib/ios/AirGoogleMaps/AIRGoogleMapManager.m#L55

and the handleMpaDrag funciton was no longer being called. Despite that after releasing the marker we cannot touch any buttons in the view.

[luispeerez]

Are you using onMapReady on your MapView?

[luispeerez]

Probably related https://github.com/kmagiera/react-native-gesture-handler/issues/320 I downgraded to RN gesture handler 1.0.9, using react-navigation 3

[grabbou]

It could be Google related, because I haven't observed that issue when using Apple as a maps provider.

[grifotv]

I have this issue when using onLongPress on iOS with provider=MapView.PROVIDER_GOOGLE.

With either Android or iOS with default provider it works fine.

[mbrehme]

Having the same issue. The only working solution is to downgrade react navigation, am I right?

[wendysychan]

Having the same issue too..

[sergey-ovdienko]

If somebody still needs a solution, please check this comment https://github.com/react-native-community/react-native-maps/issues/2780#issuecomment-562629150

It helped in our case, maybe it could help yours.

[nimrodbens]

same here :D

[wendysychan]

:(

[mertlena]

if somebody still needs a solution, please check this comment https://github.com/react-native-community/react-native-maps/issues/2780#issuecomment-678128741

It helped in my case, maybe it could help yours.

[nimrodbens]

@mertlena , thanks. i tried it but unfortunately it didn't work. it's not just about my components in the app that are not responsive, i can't even click this button after i long press to pin:

https://imgur.com/a/zxc5c04

[mertlena]

@nimrodbens did you set position:absolute for your MapView ?

[nimrodbens]

yes i have because i have custom overlay on top of the map. i tried now to put the map inside a View and let this view be with position:absolute and let the map have flex: 1. still same result.