Example MarkerView Lag App

This is a reproduction example demonstrating the lag/drift issue experienced with Mapbox MarkerView on Android when panning the map.

Project Overview

The app displays a map of London with a configurable number of markers (up to 2000). Each marker has a pulsing animation.

Key Features:

• Mapbox Integration: Uses @rnmapbox/maps.
• MarkerView: Uses MarkerView instead of PointAnnotation to support continuous React Native animations (Pulsing).
• Interactive Controls:
  • Marker Count: specific control to set the number of markers rendered.
  • Animation Toggle: Button to start/stop the pulsing animation to test performance impact.

Prerequisites

• Mapbox Access Token: You must have a Mapbox public access token.
  • The token is currently hardcoded in App.tsx. Please replace pk.ey... with your valid token if you haven't already.

Installation

npm install

Running the App

Since this project uses native modules (@rnmapbox/maps), you cannot use Expo Go. You must use a Development Build (Prebuild).

Android

npm run android

(This runs npx expo run:android)

iOS

npm run ios

(This runs npx expo run:ios)

The Issue

On Android, when panning the map, you will observe that the MarkerView elements do not track tightly with the map. They tend to "drift" or lag behind the camera movement before snapping back to their correct geographic position when the movement stops.

This behavior is not observed on iOS.