Maps: iOS: PointAnnotation jumps back to initial position after dragging

[bllanos]

Describe the bug
When a UserLocation component is being rendered with it's visible prop set to true, PointAnnotation components exhibit unwanted dragging behaviour:

• They may jump back and forth between their original positions and the position that the user is currently touching during the drag interaction
• They may snap back to their original positions after the drag ends and the user touches the map

To Reproduce

Run the example app below on a physical iOS device. It should render a user location marker and a circular red point annotation at the same location. Try dragging the point annotation to different locations on the map at least 10 times (the problem does not occur every time). If you then reload the app after setting USER_SHOW_LOCATION in the code sample below to false, the drag interactions with the point annotation should be smooth and the point annotation should not jump back to the position it was in at the start of a drag. (In other words, the bug only occurs when USER_SHOW_LOCATION is true in the code sample.)

Example:

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

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

MapboxGL.setAccessToken('MAPBOX_API_TOKEN');

const INITIAL_COORDINATES = [3.380271, 6.464217];

/**
 * Change this variable to see behaviour with and without showing the user's
 * location. The issue seems to appear only when the user's location is shown.
 *
 * Note: On Android (where the bug is not observed),
 * you will need to give the app location permissions for the app to run properly
 */
const USER_SHOW_LOCATION = true;

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

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={{flex: 1}}>
        <MapboxGL.MapView style={{flex: 1}}>
          <MapboxGL.Camera
            followUserLocation={true}
            followUserMode={MapboxGL.UserTrackingModes.Follow}
          />
          <MapboxGL.UserLocation
            visible={USER_SHOW_LOCATION}
            onUpdate={(e: any) => {
              console.log('User location update: ', e);
              if (!firstLocationSet) {
                setFirstLocationSet(true);
                setCoordinates([e.coords.longitude, e.coords.latitude]);
              }
            }}
          />
          <MapboxGL.PointAnnotation
            id={'pointAnnotation'}
            coordinate={coordinates}
            draggable={true}
            onDragEnd={onDragEnd as () => void}>
            <View
              style={{
                alignItems: 'center',
                backgroundColor: 'red',
                borderRadius: 15,
                height: 30,
                justifyContent: 'center',
                overflow: 'hidden',
                width: 30,
              }}
            />
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>
      </SafeAreaView>
    </>
  );
};

export default App;

Expected behavior
The point annotation should always follow the user's touch during a drag and should remain where it is dragged to.

Versions (please complete the following information):

• Platform: iOS
• Device: iPhone 8 and iPhone XS
• Emulator/ Simulator: No
• OS: iOS 14.2
• react-native-mapbox-gl Version 8.1.0-rc.9
• React Native Version 0.63.3

Additional context
The issue occurs with the Mapbox iOS SDK version 5.8.0 (the default installed with react-native-mapbox-gl), but also with version 6.3.0, which we installed by adding $ReactNativeMapboxGLIOSVersion = '~> 6.3' to ios/Podfile as instructed here.

We do need to retrieve the final coordinates of the point annotation (for which we are using onDragEnd) in order to use them elsewhere in the app.

[lishuo0710]

I face same issue that markview will back to last loaction after move few steps while camera animation begin (ps: the markview and the camera has the same dynamic coordinates).I think it casuesd by the carmer animation，when camera animaduration set 0， the problem disappear,but the move perform ugly

[gokugen]

I face the same issue any updates ?

[bllanos]

Another workaround might be to pass a prop of renderMode="native" to the UserLocation component.