[Bug]: MapView onPress is slow

Mapbox Implementation

Mapbox

Mapbox Version

11.4.1

React Native Version

0.76.7

Platform

Android

@rnmapbox/maps version

^10.1.37

Standalone component to reproduce

import React, { useCallback, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import Mapbox, { LineLayer, ShapeSource } from '@rnmapbox/maps';
import { Feature, LineString } from 'geojson';

Mapbox.setAccessToken('');

const App = () => {
  const [feature, setFeature] = useState<Feature<LineString>>({
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
        [0, 0],
        [4, 4],
        [0, 8],
        [4, 0],
      ]
    },
    properties: {}
  })

  const onPress = useCallback((feature: Feature) => {
    console.log('onPress')
    
    setFeature((prev) => {
      if(feature.geometry.type !== 'Point') return prev

      return {
        ...prev,
        geometry: {
          ...prev.geometry,
          coordinates: [
            ...prev.geometry.coordinates,
            feature.geometry.coordinates
          ]
        }
      }
    })
  }, [])


  return (
    <View style={styles.page}>
      <View
      style={styles.container}
      >
        <Mapbox.MapView
          style={styles.map}
          onPress={onPress}
        >
          <ShapeSource
            shape={feature}
            id='drawingShapeSource'
          >
            <LineLayer
              id="drawingLineLayer"
              style={{
                lineColor: 'yellow',
                lineWidth: 4,
                lineCap: 'round',
                lineJoin: 'round'
              }}
            />
          </ShapeSource>
        </Mapbox.MapView>
      </View>
    </View>
  );
}

export default App;

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1
  }
})

Observed behavior and steps to reproduce

Mapbox.MapView.onPress takes 500ms to 1s to register, which is quite bad for user experience.

Run the example and press anywhere on the map to draw a GeoJSON Feature<LineString> and notice a 500ms to 1s delay before your drawing gets updated. Watch the console to see that the drawing updates almost immediately when 'onPress' gets logged, indicating that the onPress callback takes a while to get called.

Expected behavior

onPress should be called immediately when the user presses the map.

Notes / preliminary analysis

I dug a little deeper and found functions _decodePayload and _onPress, both executing after the delay immediately before onPress. Then it gets into the weeds of native code, I'd be happy to explore more with some guidance on what to look for.

Additional links and references

No response

Start with the MapView event path around _decodePayload and _onPress, then reproduce the Android example with the supplied standalone component. Trace the native code invoked before the callback and measure where the 500ms–1s delay occurs. Done means MapView.onPress fires immediately and the drawing update no longer has the reported delay.