rnmapbox / rnmapbox/maps

[Bug]: `Camera` manipulation not working within `onLongPress`

Open
#2,738 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Kotlin
Stars
2.9k
Forks
947
Avg merge
6d 37m
Merged PRs (30d)
1

Description

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

https://user-images.githubusercontent.com/32203139/227482738-2102ef56-83dd-4828-85d8-f99129d05fe4.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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the standalone React Native reproduction and trace how MapView dispatches onLongPress while Camera methods such as flyTo, panTo, and setCamera are invoked. Compare this with the working onPress path on iOS and Android. Done means camera manipulation works when triggered from onLongPress without disrupting the expected long-press behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.