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

[Epick362]

Mapbox Implementation

Mapbox

Mapbox Version

10.13.1

Platform

iOS

@rnmapbox/maps version

10.0.6

Standalone component to reproduce

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

const BugReportExample = () => {
  return (
       <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/icon.png')}
                />
           </TouchableOpacity>
      </MarkerView>
  )
}

Observed behavior and steps to reproduce

Click on the marker which is located in atlantic ocean and it fades (TouchableOpacity) but it is not logged into console.

Expected behavior

Pressed should be logged into console.

Notes / preliminary analysis

No response

Additional links and references

No response

[github-actions]

Lint failed 😭

Please fix the errors in your code example - More info.:

<text>
  24:27  error  'require' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

[mfazekas]

Please post a complete example.

I wasn't able to reproduce with this one:

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;

[Epick362]

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.

[mfazekas]

@Epick362 what do you mean doesn't work?

You can try to download our repo and example app, and reproduce the issue there. You can also try to put this component as the main component of the app to see if you can repro the issue or not. We can only look into the issue if we know something about the conditions where it's possible to reproduce the issue.

[ovsiannykov]

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)

[MichaelDanielTom]

I'm also having this issue on iOS, and also have not been able to make it work with just the simple example you have provided @mfazekas (within my own project).

onPressIn does work for me, but onPressOut is immediately called. It seems like event propagation is never stopped either, as if I double tap on the pressable, it will call onPressIn, but then also zoom in on the map. One thing while debugging that I've found is that onResponderTerminationRequest on a Pressable/View within MarkerView is never called, but rather onResponderTerminate is just called immediately. None of the similar pressability handlers within MarkerView.tsx are called either.

One thing I was thinking could be related is that we also use Reanimated within our project, so possibly it's corrupting something mapbox related? Going to keep investigating.

[mfazekas]

@MichaelDanielTom can you also repro in a new project?!
Also can you reproduce the issue if the component at

#2880 (comment)

is your root component?

[MichaelDanielTom]

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.

[mfazekas]

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

[mfazekas]

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;

[MichaelDanielTom]

Awesome @mfazekas ! In that case do you think we should re-open this issue?

Separately, I transitioned our app to only use nativeStackNavigator, however the bug seems to occasionally crop up still. Usually the touchables work ok on the first load, and then after moving around for some amount of time, something happens (not entirely sure what right now, could be loading different MarkerViews, unrelated components with touchables doing something, etc.), and it reverts to the bugged behavior where onPressIn and then onPressOut are both immediately called without onPress. Once this happens, the only way I have been able to get it working again is to hard restart the app. Will be investigating more, but I retract my previous statement that an app with nativeStackNavigator completely fixes the bug.

[MichaelDanielTom]

Update: I've narrowed it down to react-native-gesture-handler and the use of TapGestureRecognizer or Gesture.Tap in any view outside the map. After a component that uses those recognizers is loaded, the touchability of the map seems to break until the map is remounted.

Perhaps it could be somehow related to this or this?

[mfazekas]

@MichaelDanielTom I've reported a bug to react-native-gesture-handler software-mansion/react-native-gesture-handler#2530

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

[j-piasecki]

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?

[MichaelDanielTom]

@j-piasecki Seems to have fixed the issue for me at least - thank you so much!

[mfazekas]

@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"

[rohit9625]

The onPress still does not work. Why was this issue closed? Can we do this?