[iOS] Google Maps: Dragging Marker (by long pressing the marker) triggers MapView's onLongPress

[gunsym]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

react-native: 0.52.0
react: 16.2.0
react-native-maps: 0.19.0

Target Platform: iOS - 10.2.1 / iPhone 6S / GoogleMaps
Map provider: Google

Steps to Reproduce

(Write your steps here:)

1. Add a marker by long pressing on the map
2. Long press the marker in order to drag the marker
3. This also triggers onLongPress (from MapView Component) and creates a new marker hence we are left with two markers
4. This bug is not present in Android
5. This bug is not present with Apple Maps but appears in Google Maps

Expected Behavior

The marker becomes draggable without adding a new marker (triggering onLongPress)

Actual Behavior

The marker becomes draggable but it adds a new marker (triggered onLongPress)

Reproducible Demo

https://snack.expo.io/@gunsym/google-map-on-ios

https://snack.expo.io/@gunsym/apple-map-on-ios

https://snack.expo.io/@gunsym/google-map-on-android

[gunsym]

I am not sure if others are having this problem but I have had this for a while and still have not manage to resolve this. Any others having this problem? Thanks..

[chrismcleod]

@gunsym I was able to solve this by using state. It seems onDragStart will fire before the Map's onLongPress. So onDragStart set an "isDragging" flag to true, and in your handler for onLongPress, return early if isDragging is true. Another onDragEnd handler sets isDragging back to false.

[gunsym]

Thanks @chrismcleod for sharing your findings! I appreciate it very much

[chrismcleod]

@gunsym
I was wrong, onDragStart does not always fire first. I am unsure what determines the order.

My new approach is to use setTimeout when long pressing the map.

So, in the MapView onLongPress handler start a timeout of a few milliseconds. When that timeout executes, check a variable in your component that represents whether a marker is being dragged. If it is, do nothing, otherwise handle the long press.

Add an onStartDrag to the marker that will update the state of the component to indicate a marker is being dragged. onEndDrag sets it back to false.

The flow might be:

Should Not Fire Long Press:
-> long press map, wait 10 milliseconds
-> start marker drag, set dragging to true
-> long press timeout executes and sees dragging is true so does nothing
-> marker drag ends and now dragging is false again

Should Fire Long Press:
-> long press map, wait 10 milliseconds
-> no drag was started so dragging is still false, handle map long press