question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS: Dragging PointAnnotation not working

See original GitHub issue

Describe the bug
A PointAnnotation element is not draggable, the events are not triggered. Bug occurs on a physical iPhone SE, iOS 14.4

To Reproduce

Example:

import React, {useState} from 'react';
import {SafeAreaView, View} from 'react-native';

import MapboxGL from '@react-native-mapbox-gl/maps';

MapboxGL.setAccessToken(<ACCESS_TOKEN>);

const INITIAL_COORDINATES = [13.404954, 52.520008];


const App = () => {
  const [firstLocationSet, setFirstLocationSet] = useState(false);
  const [coordinates, setCoordinates] = useState(INITIAL_COORDINATES);
  const onDragEnd = (e: any) => {
    console.log('onDragEnd');
    setCoordinates(e.geometry.coordinates);
  };
  const onDragStart = (e: any) => {
    console.log('onDragStart');
  };
  const onDrag = (e: any) => {
    console.log('onDrag');
  };
  console.log('Point annotation coordinates: ', coordinates);

  return (
    <>
      <SafeAreaView style={{flex: 1}}>
        <MapboxGL.MapView style={{flex: 1}}>
          <MapboxGL.PointAnnotation
            id={'pointAnnotation'}
            coordinate={coordinates}
            draggable={true}
            onDragEnd={onDragEnd}
            onDragStrat={onDragStart}
            onDrag={onDrag}
          >
          </MapboxGL.PointAnnotation>
        </MapboxGL.MapView>
      </SafeAreaView>
    </>
  );
};

export default App;

Expected behavior
The PointAnnotation object should move and the events onDragStart, onDrag and onDragEnd should be triggered.

Actual behavior
The PointAnnotation element does not move and the drag events are not triggered.

Versions:

  • Platform: iOS
  • Platform OS: iOS 14.4
  • Device: iPhone SE (2nd generation)
  • Emulator/ Simulator: no
  • Dev OS: macOS Big Sur (11.0), M1 Chip
  • react-native-mapbox-gl: 8.1.0
  • React Native Version 0.63.4

Additional context I tried just touching and moving the marker as well as a long press (longPress) and then moving, both interactions do not work for me.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
SkySailscommented, May 12, 2021

For me, it works as soon as I include a child element that is big enough to tap on. Here are two examples:

Non-working version

Here, no events are fired and the marker does not move.

<MapboxGL.PointAnnotation id={'point1'} coordinate={[20, 59]} onDrag={() => console.log("dragged")} draggable />

Working version

Here, events fire and I am able to drag the marker around just like on Android. Not sure why, since it does output a marker symbol which makes you believe that it is a pressable area but hey, at least this method works!

<MapboxGL.PointAnnotation id={'point1'} coordinate={[20, 59]} onDrag={() => console.log("dragged")} draggable >
    <View style={{padding: 20, backgroundColor: 'red'}} />
</MapboxGL.PointAnnotation>
1reaction
rastuchcommented, Apr 21, 2021

Same here on IOS, android working fine. Possibly it has to do with this feature https://github.com/react-native-mapbox-gl/maps/issues/934 @mfazekas

Read more comments on GitHub >

github_iconTop Results From Across the Web

PointAnnotation jumps back to initial position after dragging ...
Try dragging the point annotation to different locations on the map at least 10 times (the problem does not occur every time).
Read more >
Why my MKPointAnnotation not draggable and how can I ...
Ok, answering myself: I can drag the pin only when the title is added to the pin, otherwise it's not draggable, which is...
Read more >
MapKit pin dragging question | Apple Developer Forums
I'm not sure what I'm doing wrong or failing to do, but I can't get a map pin ... mapPin = MKPointAnnotation() if...
Read more >
PointAnnotation Structure Reference - Mapbox docs
Controls whether or not the user can drag the annotation across the map. Declaration. Swift public var isDraggable: Bool.
Read more >
rnmapbox/Lobby - Gitter
Hi @mfazekas ShapeSource onPress is working fine but i'm not able to drag complete ShapeSource on maop just like we do in Point...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found