Maps: iOS: Dragging PointAnnotation not working

[jayhaluska]

Describe the bug
A PointAnnotation element is not draggable, the events are not triggered. Bug occurs on a physical iPhone SE, iOS 14.4

To Reproduce

Example:

import React, {useState} from 'react';
import {SafeAreaView, View} from 'react-native';

import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken(<ACCESS_TOKEN>);

const INITIAL_COORDINATES = [13.404954, 52.520008];


const App = () => {
  const [firstLocationSet, setFirstLocationSet] = useState(false);
  const [coordinates, setCoordinates] = useState(INITIAL_COORDINATES);
  const onDragEnd = (e: any) => {
    console.log('onDragEnd');
    setCoordinates(e.geometry.coordinates);
  };
  const onDragStart = (e: any) => {
    console.log('onDragStart');
  };
  const onDrag = (e: any) => {
    console.log('onDrag');
  };
  console.log('Point annotation coordinates: ', coordinates);

  return (
    <>
      <SafeAreaView style={{flex: 1}}>
        <MapboxGL.MapView style={{flex: 1}}>
          <MapboxGL.PointAnnotation
            id={'pointAnnotation'}
            coordinate={coordinates}
            draggable={true}
            onDragEnd={onDragEnd}
            onDragStrat={onDragStart}
            onDrag={onDrag}
          >
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>
      </SafeAreaView>
    </>
  );
};

export default App;

Expected behavior
The PointAnnotation object should move and the events onDragStart, onDrag and onDragEnd should be triggered.

Actual behavior
The PointAnnotation element does not move and the drag events are not triggered.

Versions:

• Platform: iOS
• Platform OS: iOS 14.4
• Device: iPhone SE (2nd generation)
• Emulator/ Simulator: no
• Dev OS: macOS Big Sur (11.0), M1 Chip
• react-native-mapbox-gl: 8.1.0
• React Native Version 0.63.4

Additional context
I tried just touching and moving the marker as well as a long press (longPress) and then moving, both interactions do not work for me.

[felixgourdeau]

Can confirm I have the exact same problem.

using the latest ios sdk version $ReactNativeMapboxGLIOSVersion = '6.3.0'

same code works well in android

edit: works with $ReactNativeMapboxGLIOSVersion = '6.2.0'

[SamuelGuNUAA]

The same issue on 8.1.0

updating: Actually it is draggable but need a long press on the point before dragging, which is different as the behaviour on Android.

[gokugen]

Same issue, even with the long press

[rastuch]

Same here on IOS, android working fine.
Possibly it has to do with this feature https://github.com/react-native-mapbox-gl/maps/issues/934
@mfazekas

[SkySails]

For me, it works as soon as I include a child element that is big enough to tap on. Here are two examples:

Non-working version

Here, no events are fired and the marker does not move.

<MapboxGL.PointAnnotation id={'point1'} coordinate={[20, 59]} onDrag={() => console.log("dragged")} draggable />

Working version

Here, events fire and I am able to drag the marker around just like on Android. Not sure why, since it does output a marker symbol which makes you believe that it is a pressable area but hey, at least this method works!

<MapboxGL.PointAnnotation id={'point1'} coordinate={[20, 59]} onDrag={() => console.log("dragged")} draggable >
    <View style={{padding: 20, backgroundColor: 'red'}} />
</MapboxGL.PointAnnotation>