[Bug]: iOS PointAnnotation need to "longpress" before you can start dragging it on the map, on Android you can drag immediately after Press/Tap

[smartmedev]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.70.8

Platform

iOS

@rnmapbox/maps version

10.1.15

Standalone component to reproduce

import React, {useState, useRef} from 'react';
import {
    StyleSheet,
} from 'react-native';

import MapboxGL from "@rnmapbox/maps";

const PointAnnotationBugIos = (props) => {
  const mapboxCamera = useRef(null);
  const mapboxMap = useRef(null);
  const editablePolygonPointsRef = useRef([]);

  const [geofenceEditCoords, setGeofenceEditCoords] = useState([[8.966282182525784, 45.63315618252579], [8.966282182525784, 45.63282321747422], [8.965949217474215, 45.63282321747422], [8.965949217474215, 45.63315618252579]]);
  const [propertyCenter, setPropertyCenter] = useState([8.966115, 45.6329897]);

  const draggingEditablePoint = (index, feature) => {
    const updatedCoordinates = [...geofenceEditCoords];
    updatedCoordinates[index] = feature.geometry.coordinates;
    setGeofenceEditCoords(updatedCoordinates)
  };

  const changeCoordinate = (index, feature) => {
    let newCoord = [feature.geometry.coordinates[0], feature.geometry.coordinates[1]];
    let newPolygonCoords = [...geofenceEditCoords];
    newPolygonCoords.splice(index, 1);
    newPolygonCoords.splice(index, 0, newCoord);

    if (geofenceEditCoords) {
      setGeofenceEditCoords(newPolygonCoords) 
    }
  }

  return (
    <>
      <MapboxGL.MapView 
        ref={mapboxMap}
        style={{...StyleSheet.absoluteFillObject}}
        attributionEnabled={false}
        scaleBarEnabled={false}
        compassEnabled={false}
        pitchEnabled={false}>
        <MapboxGL.Camera
          ref={mapboxCamera}
          zoomLevel={18}
          minZoomLevel={15}
          maxZoomLevel={20}
          centerCoordinate={propertyCenter} />

        {geofenceEditCoords!==null && geofenceEditCoords && geofenceEditCoords.length>0 ? 
            <MapboxGL.ShapeSource
              key={"keyPolygonElem"}
              id={"keyPolygonElem"}
              shape={
                  geofenceEditCoords.length>3 ?
                    { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Polygon', coordinates: [geofenceEditCoords] } }] } :
                    geofenceEditCoords.length>1 ? 
                      { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'LineString', coordinates: geofenceEditCoords } }] } :
                      { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: geofenceEditCoords[0] } }] }
                  }>
                  <MapboxGL.FillLayer 
                      key="keyPolygon-fill" 
                      id="keyPolygon-fill" 
                      sourceID="keyPolygonElem"
                      style={{fillColor: 'rgba(0,0,0,0.2)'}} />
                  <MapboxGL.LineLayer
                    sourceID="keyPolygonElem"
                    id="keyPolygon-stroke"
                    key="keyPolygon-stroke"
                    style={{
                        lineColor: 'rgba(47,182,250,0.7)', 
                        lineWidth: 10,
                        lineJoin: 'round'
                      }} />
            </MapboxGL.ShapeSource> : null }
        {geofenceEditCoords!==null && geofenceEditCoords && geofenceEditCoords.length>0 ? 
            geofenceEditCoords.map((coordinate, index) => {
                editablePolygonPointsRef.current[index] = editablePolygonPointsRef.current[index] || React.createRef();
                return (<MapboxGL.PointAnnotation
                    key={"editablePoint_"+index}
                    id={"editablePoint_"+index}
                    ref={editablePolygonPointsRef.current[index]}
                    coordinate={coordinate}
                    selected={true}
                    draggable={true}
                    style={{ zIndex: 2000 }}
                    onDrag={(feature) => draggingEditablePoint(index, feature)}
                    onDragEnd={(feature) => changeCoordinate(index, feature)}></MapboxGL.PointAnnotation>)
            }) : null}
      </MapboxGL.MapView>
    </>
  );
}

export default PointAnnotationBugIos;

Observed behavior and steps to reproduce

On iOS, try to drag one PointAnnotation, if you press and try to drag all the map start to scrolling and the PointAnnotation will not move. To make PointAnnotation moving you need to LongPress on it (at least 1 second), than if you drag it, it start moving.

Secondly, all PointAnnotations appear to be at a level below the LineLayer, they should be on top level as happens on Android.

Expected behavior

Expected behavior is the same that works running this code on Android. When you try to drag one PointAnnotation it starts moving immediately after pressing it and dragging, you don't need to long press on it.

Secondly, here on Android, all PointAnnotations appear to be at the top level, over the LineLayer.

Notes / preliminary analysis

Note that this code works as expected on Android but not on iOS.

Additional links and references

Video that show how it works correctly on Android: drag start immediately after press and PointAnnotation above LineLayer. https://github.com/rnmapbox/maps/assets/107206974/dbb9a22e-75db-458b-83fa-d4c5e0f7532a

On iOS you need to longpress before you can start dragging and PointAnnotation are below LineLayer

[dalabarge]

Not sure if it's related to this but I'm also experiencing on iOS only that a RasterSource map is not interactive. On Android the same map is interactive but on iOS it freezes. Any other non-raster sources render and are interactive on both Android and iOS but not the raster source. The map loads fine but just not interactive.

Version 10.1.19 React Native 0.72.6

Confirmed working in version 10.0.15. Seems the 10.1+ upgrade that dropped mapbox-gl might have broken something?

[SebiVPS]

I would prefer, if the Android implementation would behave the same as the iOS implementation. If you have the onSelected callback and the onDragStart callback (and the other drag callbacks), it is very problematic to differentiate between a "click" and a "drag" gesture if both are fired at the same time. On iOS this is solved with the longPressGesture before the drag event starts. I hope this will be fixed on Android soon.

Versions: "@rnmapbox/maps": "^10.1.31", "react-native": "0.75.3",

I guess this behaviour is since #3368 @mfazekas you think it is possible to rework that, so that Android behaves the same as on iOS? (i used v8 before, there the behaviour was the same - with longPress)