[Bug]: Camera manipulation not working within onLongPress

[michalpazur]

Mapbox Implementation

Mapbox

Mapbox Version

default

Platform

iOS, Android

@rnmapbox/maps version

10.0.0-rc.1

Standalone component to reproduce

import MapboxGL, { Camera } from "@rnmapbox/maps";
import React, { useRef } from "react";
import { StyleSheet, View } from "react-native";

const MapView = MapboxGL.MapView;

const Map: React.FC = () => {
  const mapCamera = useRef<Camera>(null);

  const flyToCoordinates = async (coordinates: GeoJSON.Position) => {
    mapCamera.current?.flyTo(coordinates);
  };

  const onLongPress = (feature: GeoJSON.Feature) => {
    const point = feature as GeoJSON.Feature<GeoJSON.Point>;
    const coordinates = point.geometry.coordinates;
    flyToCoordinates(coordinates);
  };

  return (
    <View style={StyleSheet.absoluteFillObject}>
      <MapView onLongPress={onLongPress} style={{ flex: 1 }}>
        <Camera
          centerCoordinate={[-0.15, 51.51]}
          zoomLevel={16}
          maxZoomLevel={18}
          ref={mapCamera}
        />
      </MapView>
    </View>
  );
};

export default Map;

Observed behavior and steps to reproduce

• Long press with finger on a map
• Map doesn't pan to place where finger was held despite flyTo having been called

RPReplay_Final1679650585.MP4

Expected behavior

Map should pan to the place where user's finger was held.

Notes / preliminary analysis

• This code works if flyTo is called inside onPress callback.
• This affects all Camera methods, including flyTo, panTo, setCamera.
• It seems to be caused by longPress event firing before user takes their finger off the screen.

Additional links and references

No response

[mfazekas]

@michalpazur thanks much for the report the issue is that we report false from longClick handler.

maps/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/mapview/RCTMGLMapView.kt

Lines 647 to 653 in 97459e2

	val screenPoint = mMap?.pixelForCoordinate(point)
	if (screenPoint != null) {
	val event = MapClickEvent(_this, LatLng(point), screenPoint, EventTypes.MAP_LONG_CLICK)
	mManager.handleEvent(event)
	}
	return false

https://docs.mapbox.com/android/maps/api/10.12.1/mapbox-maps-android/com.mapbox.maps.plugin.gestures/-on-map-long-click-listener/on-map-long-click.html

One solution is to always return true if there is a longPress javascript handler, another one is to interrupt the gesture handler once the javascript code was run.

val gestureManager = map.gestures.getGesturesManager()
gestureManager.moveGestureDetector.interrupt()

[cometman]

Having the same issue. Works when using onPress but onLongPress does not allow me to setCamera. I tried returning true from all my handlers but did not resolve.