React-native-mapbox-gl: Add support for drawable library on Android

[kristfal]

Long story short:

We're building a lib for drawing on top of react-native-mapbox-gl. It works great on iOS, but doesn't on Android as we can't use the panResponder to capture track events when a touch event have started on the map. To have a usable drawing experience, we'll need a touch flow like this:

1. onLongPress to add a drawing feature/feature vertex or select a current one
2. onPanResponderMove should capture the touch gesture and let the user drag the feature/feature vertex in the map during the longPress
3. onPanResponderRelease should release the feature and let the map receive touch input again

Reasons why this approach doesn't work on Android:

1. Assigning a panResponder to a <Mapbox.MapView> component doesn't work as the map view swallows all touch events. iOS lets both MapView and the parent container's panResponder handle touch events at the same time. Ideally, this is how Android should work as well, but I believe this is dictated by the way RN works on iOS and Android, and not in this lib.

2. As a workaround, we tried creating a separate view positioned absolute above the MapView where we assigned panResponders. The idea was to trigger a switch between pointerEvents auto and none when we receive a longPress. This works, but we'll need to release the longPress that hit the map view before the panResponders start receiving gestures. As such, its also a no-go.

Reading up on the touch system on RN Android, to me it doesn't seem like its possible to have multiple views handling the same touch event. If someone finds a workaround for this, then that would be top!

If not, I believe the only way to have a working drawable library support for Android is for <Mapbox.MapView> to also emit onTrack/onDrag events whenever a touch is dragging across the map. Thoughts?

[nitaliano]

I agree here, and I have been looking into adding an onDrag event to this library it might be the only way to get this to play nicely with Android.

Or we just go the point annotation route and allow vertices to be draggable I've done something similar for react-native-maps at my last company to draw polygons and polylines https://github.com/airware/react-native-maps-draw this type of implementation could be a good way to get a v1 out in the wild, while trying to figure out how to get this to work with Android

[kristfal]

Checked out your implementation. We’re doing about the same things :)

In general, I think it would give developers more flexibility to develop cool stuff if the MapView emits drag events.

Touch events are new to me on Android, so I’m no expert, but i believe using annotation views and syncing the underlying geometry would probably not work for situations where you want longtap -> drag to insert a vertex on a linestring/poly as it would require the touch context to be transferred from the map view to the newly created annotation view.

[gangstaJS]

Hello. Any progress with this stuff? :)

[nitaliano]

I'll be looking into onDrag events soon, I figured out how to do it on Android, now I need to look into the iOS side and I will PR it. I'm sure we'll need more discussion about how we 100% want it to function, but it will be the first step in being able to support a drawing library

[olegwn]

I can confirm, this is badly needed, now I'm not even able to implement same features in my app for Android as I have for iOS because there's no way to catch Drag events.

[tayyabshabab]

Any update on this?

[kristfal]

Building a proper drawable library is outside the scope of this main library. We should work on enabling dragable annotations/shape sources as a baseline for both platforms, but anything beyond that should be left outside this core.

If anyone is able to provide a PR allowing us to intercept gestures with PanResponder or equivalent for Android, I'd be happy to merge.