[Bug]: Touches on map markers don’t block map gestures on Android

[mariusud]

Mapbox Implementation

Mapbox GL

Mapbox Version

11.9.0

React Native Version

0.79.2

Platform

Android

@rnmapbox/maps version

10.1.39

Standalone component to reproduce

import React from 'react';
import Mapbox, { Camera, MapView, MarkerView } from '@rnmapbox/maps';
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MapView style={{ flex: 1 }}>
        <Camera zoomLevel={11} centerCoordinate={[10.63, 59.91]} />
        <MarkerView coordinate={[10.63, 59.91]}>
          <View style={styles.marker} />
        </MarkerView>
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  marker: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: 'blue',
    borderWidth: 2,
    borderColor: 'white',
  },
});

Observed behavior and steps to reproduce

Long-press and drag the marker. You will see different behaviour depending on your device:

• iOS: The marker stays under the finger, the map does not move.
• Android: The map moves underneath, the marker does not drag.

Expected behavior

Behavior should be consistent between iOS and Android. on iOS touch interactions on MarkerView (same goes for ShapeSource, PointAnnotation etc) are consumed by the marker and the map does not pan/zoom/rotate, which is the expected behaviour. While a marker is being pressed/dragged on android, the map should pans/zooms/rotates which is unexpected.

Notes / preliminary analysis

No response

Additional links and references

No response

[msaqlain]

For workaround i am using Pressable for Android & TouchableOpacity for IOS

Android: import { Pressable } from 'react-native-gesture-handler';

IOS: import { TouchableOpacity } from 'react-native';

Created custom component

const MyPressable = ({ children, ...props }: ILTPressable) => {
    return (
        Platform.OS === 'ios' ? (
            <TouchableOpacity {...props}>
                {children ? children : null}
            </TouchableOpacity>
        ) : (
            <Pressable {...props}>
                {children ? children : null}
            </Pressable>
        )
    );
};

export default MyPressable;

[mariusud]

This bug also exists for ShapeSource, PointAnnotation and all other map shapes

[mariusud]

@mfazekas do you know if this issue stems from rnmapbox or mapbox?