Bug with react-native-maps and Touchable elements

[compojoom]

Current Behavior

• What code are you running and what is happening?

I've run into a bug with react-native-maps and react-navigation. When react native maps renders a draggable marker and one drags the marker all touchable elements on the page are becoming unresponsive. One can't press any button on the page until the map is moved again.

It took me quite some time to realise that this is related to react-navigation, but after reverting 200 commits I found out that after updating to react-navigation v3 the bug appeared. Previously with react-navigation 2.18.3 everything was working fine.

• Here is a gif of the issue
  

The code to reproduce is very simple:

import React, { Component } from 'react'
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'

import { createStackNavigator, createAppContainer } from 'react-navigation'

class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    return {
      title: 'Header',
      headerRight: <TouchableOpacity>
        <Text style={{color: 'red'}}>Done</Text>
      </TouchableOpacity>
    }
  }

  render () {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>Move marker, then press on the Done button in the header. It won't work. One needs to move the map
        for the buttons to become clickable again.
        </Text>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
        >
          <Marker coordinate={{latitude: 45, longitude: 8}} draggable={true}/>
        </MapView>

        <TouchableOpacity>
          <Text>this button can't be pressed as well when marker moved</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
})

export default createAppContainer(AppNavigator)

const styles = StyleSheet.create({
  map: {
    width: 500,
    height: 500
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
})

As visible in the gif and in the code - one doesn't need to navigate to have the problem. It appears even with a single screen.

Also what I need to note is that this doesn't happen with apple maps. It's only with google-maps on iOS. On android the touchable elements are still touchable. My guess is that this is somehow related to react-native-gesture-handler?

Expected Behavior

I would expect that after dragging a marker one would be able to interact with the elements on the page.

How to reproduce

Here is a repository with the problem:
https://github.com/compojoom/rnMapsNavigationBug

Your Environment

software	version
react-navigation	3.2.3
react-native	0.57.8 && 0.58.4
node	11
yarn	1.13

[compojoom]

What I could figure out today is that when one removes the PanGestureHandler:
https://github.com/react-navigation/react-navigation-stack/blob/master/src/views/StackView/StackViewLayout.js#L300
then everything behaves correctly. (obviously the navigation won't work, but interacting with the map and afterwards with touchable elements is working)

[compojoom]

I was able to reproduce the bug only with the PanGestureHandler https://github.com/compojoom/rnMapsNavigationBug/blob/gesture_hangler/App.js

https://github.com/compojoom/rnMapsNavigationBug/tree/gesture_hangler

So I'll re-post this issue in the rn-gesture-handler repository

[eriveltonelias]

Hi @compojoom,

https://snack.expo.io/@eriveltonelias/maps-react-navigation

[compojoom]

@ericvicenti - so what's different, except that you made the map take the whole space and moved the button on top of it? Same bug applies.

Ah, you made it into a snack. Thanks :)

[brentvatne]

this is unrelated to react-navigation, I just took the example you provide and removed react-navigation entirely and the same issue exists - see https://snack.expo.io/@notbrent/map-touchables. you should file the bug on the react-native-maps repo.

[compojoom]

@brentvatne - thanks for having a look.

I tried your expo and I can't confirm your findings. Without React Navigation the marker and touchables work as expected for me??? I press on the marker, move it, then touch the button and get the alert - every time? Do you want a video?

I think that the issue is the underlying rn-gesture-handler. That's why I have an example with it and I've reported the issue in the rn-gesture-handler repository. However since react-navigation uses rn-gesture-handler it's partially our problem as well...

[brentvatne]

you're right, not sure why i thought it was reproducing w/o react-navigation last night. agree that this does seem related to rngh

[brentvatne]

here is a reproducible example with just an empty PanGestureHandler around the screen: https://snack.expo.io/@notbrent/map-touchables

[brentvatne]

i added some context in software-mansion/react-native-gesture-handler#465

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[sinikoglu]

hello , i know it is an late answer but i solve this issue myself by removing
provider={PROVIDER_GOOGLE}
and using apple maps on ios.
if GoogleMaps is not really necessary for you , it would help you.

[mertlena]

if somebody still needs a solution, please check this comment react-native-maps/react-native-maps#2780 (comment)

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