iOS: Dragging PointAnnotation not working
See original GitHub issueDescribe 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:
- Created 3 years ago
- Reactions:2
- Comments:8 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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!
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