Markers inside MarkerView change position when you drag the map

[Xinayder]

Describe the bug When moving the map with a MarkerView being displayed, the marker will change its position instead of staying at its coordinates.

To Reproduce Add a MarkerView with a marker and drag the map.

Example:

import React, { useState, useEffect } from 'react';
import { Text, View, Animated, TouchableOpacity, ToastAndroid, Alert } from 'react-native';
import MapboxGL from '@react-native-mapbox-gl/maps';

const AnnotationContent = ({title}) => (
  // <View style={{width: 60}}>
    <TouchableOpacity
      style={{
        backgroundColor: 'blue',
        width: 60,
        height: 60,
        borderRadius: 50,
        alignItems: 'center',
        justifyContent: 'center',
      }}
      onPress={() => console.log('touche')}
    >
      <Text
        style={{
          color: 'white',
          fontWeight: 'bold',
        }}>
        Btn
      </Text>
    </TouchableOpacity>
  // </View>
);

const App = () => {

  MapboxGL.setAccessToken('ACCESS TOKEN');

  const [style, setStyle] = useState<{}>({
    circleRadius: 20,
    circleColor: 'tomato'
  });

  return (
    <View style={{flex: 1}}>
      <MapboxGL.MapView
        styleURL={MapboxGL.StyleURL.Dark}
        style={{flex: 1}}
      >
        <MapboxGL.Camera
          zoomLevel={10}
          centerCoordinate={[19.040236, 47.497913]}
        />

        <MapboxGL.MarkerView coordinate={[19.040236, 47.497955]} anchor={{x: 0.5, y: 0.5}} draggable={false}>
          <AnnotationContent>the quick brown fox jumped over the lazy dog</AnnotationContent>
        </MapboxGL.MarkerView>

      </MapboxGL.MapView>
    </View>
  );
}

export default App;

Expected behavior The marker shouldn't move when you're dragging the map. The same does not occur with PointAnnotation.

Screenshots video

Versions (please complete the following information):

• Platform: Android
• Device: Poco F1
• Emulator/ Simulator: no
• OS: Android 10
• react-native-mapbox-gl Version 8.1.0-rc.4
• React Native Version 0.63.2

Additional context I had a similar issue that markers would move when I moved the map in LeafletJS, turns out it was related to the marker's icon anchors; setting them to the default value when using the default icon fixed the issue and the markers wouldn't move when the map was dragged.

I used scrcpy to share my phone screen to my PC, and this issue happens on the phone as well, it's not a visual defect that occurs with scrcpy.

[ferdicus]

Hey @RockyTV , what is your usecase? Does it have to be highly interactive?

Unfortunately that is part of the implementation on Android :(

If you can live with something less interactive you should look into PointAnnotation or SymbolLayer instead.

[Xinayder]

@ferdicus I just want something that can be customized and can listen to tap/click events. PointAnnotation would be ideal but it doesn't support interaction. I haven't tried SymbolLayer yet; does it require a GeoJSON shape source?

[kneza23]

anyone found a way around this?

[cyrilmarceau]

Interested if anyone have a solution. Same problem on Android.

V10 "@rnmapbox/maps": "10.0.0-beta.62",