[Bug]: MarkerView drift on Android during pan/zoom with @rnmapbox/maps@10.3.2 #4276

import Mapbox, { Camera, CircleLayer, MapView, MarkerView, ShapeSource } from "@rnmapbox/maps"
import React from "react"
import { StyleSheet, Text, View } from "react-native"

// Set your own public Mapbox access token (never commit a real one).
Mapbox.setAccessToken(process.env.EXPO_PUBLIC_MAPBOX_ACCESS_TOKEN ?? "REPLACE_WITH_YOUR_OWN_MAPBOX_ACCESS_TOKEN")

// Paris, arbitrary — any two nearby points work.
const CENTER = [2.3522, 48.8566]
const POIS = [
  { id: "a", coordinate: [2.3522, 48.8566], label: "120 m" },
  { id: "b", coordinate: [2.3572, 48.8596], label: "340 m" },
]

// Plain dot on a ShapeSource/CircleLayer — a native GL layer, no image asset,
// no RN bridge per-frame, so it never drifts: this is the reference.
const DOT_RADIUS = 18

const dotShape = {
  type: "FeatureCollection",
  features: POIS.map((poi) => ({
    type: "Feature",
    id: poi.id,
    geometry: { type: "Point", coordinates: poi.coordinate },
    properties: {},
  })),
}

const dotLayerStyle = {
  circleRadius: DOT_RADIUS,
  circleColor: "#2a9d8f",
  circleStrokeWidth: 2,
  circleStrokeColor: "white",
}

// Same pattern as a typical distance-label marker: a MarkerView pinned at the
// same coordinate as the dot, offset above it. This is a real RN view
// re-projected by rnmapbox every frame — this is the one that drifts on
// Android pan/zoom while the CircleLayer dot above stays glued to its
// coordinate.
const LABEL_GAP = 10

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} styleURL={Mapbox.StyleURL.Street}>
        <Camera zoomLevel={13} centerCoordinate={CENTER} />

        <ShapeSource id="dots-shape-source" shape={dotShape}>
          <CircleLayer id="dots-circle-layer" style={dotLayerStyle} />
        </ShapeSource>

        {/* Drag the map on Android: the label drifts away from its dot. */}
        {POIS.map((poi) => (
          <MarkerView
            key={poi.id}
            coordinate={poi.coordinate}
            anchor={{ x: 0.5, y: 1 }}
            pointerEvents="none"
          >
            <View style={styles.labelOffset} pointerEvents="none">
              <View style={styles.labelBadge}>
                <Text style={styles.labelText}>{poi.label}</Text>
              </View>
            </View>
          </MarkerView>
        ))}
      </MapView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
  // anchor {x:0.5, y:1} pins the label's bottom-center to the coordinate, then
  // this pushes it straight up, clear of the dot's radius + a gap.
  labelOffset: { transform: [{ translateY: -(DOT_RADIUS + LABEL_GAP) }] },
  labelBadge: {
    backgroundColor: "#ffb703",
    borderColor: "black",
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  labelText: { fontSize: 12, fontWeight: "700", color: "black" },
})