maps: [Bug]: MarkerView does not invoke onPress handler in children

Hi 👋! I’ve looked into it and it looks like there was some unintended interaction between Gesture Handler’s root view recognizer and the recognizers of Mapbox - when one of the gestures activates, Gesture Handler will cancel the JS responder so they don’t conflict with each other. The problem was that this can be triggered by every recognizer, so when a native gesture recognizer from Mapbox would activate, GH would cancel the JS responders.

I’ve made a PR to only cancel the JS responders when activating recognizer is from Gesture Handler. Could you verify that it’s solving the problem for you?

Ok so I was able to reproduce the issue with those changes:

1.) add

yarn add  react-native-gesture-handler @react-navigation/stack

2.) Apply these changes to our App.js

- import { createNativeStackNavigator } from '@react-navigation/native-stack';
+ import { createStackNavigator } from '@react-navigation/stack';

-   const Stack = createNativeStackNavigator();
+  const Stack = createStackNavigator();

3.) Use the following example:

import React from 'react';
import { TouchableOpacity, Image } from 'react-native';
import { MarkerView, MapView, Camera } from '@rnmapbox/maps';

const BugReportExample = () => {
  return (
    <MapView style={{ width: '100%', height: '100%' }}>
      <Camera centerCoordinate={[-12.393354, 48.130477]} />
      <MarkerView
        coordinate={[-12.393354, 48.130477]}
        anchor={{ x: 0.5, y: 1 }}
      >
        <TouchableOpacity
          onPress={() => console.log('pressed')}
          style={{
            backgroundColor: 'transparent',
            width: 30,
            height: 42,
          }}
        >
          <Image source={require('../assets/example.png')} />
        </TouchableOpacity>
      </MarkerView>
    </MapView>
  );
};

export default BugReportExample;

Hey guys! I found an error and a solution. Firstly, this bug occurs only on iOS, but on Android it works fine. onPress alas does not work, but onPressIn and onPressOut in TouchableOpacity work fine. Here’s and a lifehack for you.

Dear developers @KiwiKilian! Please add onPress for MarkerView, because it’s a crutch. All the same, when you double-click on the marker, the map approaches. I think this must be immediately from the library box and must be configured already.

If anything, write me to LikedIn)

@j-piasecki thanks much it’s also working great for me.

"react-native-gesture-handler": "software-mansion/react-native-gesture-handler#@jpiasecki/cancel-responder-only-on-gh"

Ok great suggestion, putting that as the root component did work! After some more testing it would appear that the culprit is react-navigation’s stack navigator.

I’m on the latest versions of all libraries, and if that component is literally anywhere, in the tree, as a parent, behind or in front or invisible, stuff starts screwing up. Notably, the native-stack-navigator does not cause this problem at all. All permutations of using/not using react-native-screens/react-native-freeze don’t seem to have an effect.

Will figure out if there’s a straightforward solution in the next few days that involves still using the vanilla stack navigator, and will update this if so, but for anyone reading in the meantime, not using the stack navigator and instead using the native stack navigator shoulddddd fix it if your project permits.

Must be some very obscure bug because I have found out that onPressIn handler works for me so I am using this workaround in the meantime. Your example doesn’t work for me but it is probably something with my use-case.

@MichaelDanielTom I’ve reported a bug to react-native-gesture-handler https://github.com/software-mansion/react-native-gesture-handler/issues/2530

Hopefully they can give us some guidance on what could be going wrong

@MichaelDanielTom thanks amazing, we’re using @react-navigation/native-stackin @rnmapbox/maps example, and it works there. Will try with @react-navigation/stack.