How do I implement a draggable, resizable polygon on Google Maps in React Native?

Question

I am creating an app in React Native. Part of the app is a geofence represented by a polygon, and I want the user to be able to easily drag and resize the polygon with their finger.

The Google Maps API docs feature a clear example of dragging (but not resizing) a polygon using plain JavaScript. However, as integrating straight Google Maps into React doesn't seem to really work, I am using react-native-maps. It seems the draggable property of polygons is not available there. A marker can be draggable, and I presumably can re-render the polygon based on the marker's new location, but 1) the marker dragging is slow and necessitates pushing down on the marker for a second or so before it lifts, and 2) the re-render would not be fluid. This is what dragging the marker looks like (please note I have not yet coded the polygon re-rendering):

It's clunky--you usually have to press it several times in order to actually pick up the marker. The animations are slow. And if you haven't turned off the mapview scrolling (I have, but it'll need to be on in production), you frequently end up scrolling the map instead of moving the marker.

I know what I want is possible, because an app I frequently use does a similar thing. See below:

This app is obviously using Google Maps, although I cannot verify that it is using React Native. How can I achieve the same fluidity and ease of use?

EDIT 1: Given that the time-wasting animation of picking up and dropping the marker seems hardcoded in, I'm fairly certain that a successful resolution to my problem will not use markers at all. The working example from another app doesn't seem to use them either.

It's worth noting that if I add onPress= { (e) => console.log(e.nativeEvent.coordinate) } to the MapView component I get instantaneous console logs of the latitude/longitude wherever I click on the map. It should be possible to store these points in an object that defines the polygon's shape. The problem then becomes 1) how to re-render the polygon (and only the polygon) fluidly, and 2) the MapView API doesn't feature an event that fires continuously on press when you're not using a marker.

On the other hand, the API does feature an event, onMarkerDrag, that fires continuously while dragging a marker.

Mogador

Not sure why somebody downvoted you and voted to close as this is a perfectly written question with bonus screenshots! This community isn't what it used to be! – Seventy

It is certainly more useful when downvotes are accompanied with a comment explaining the deficiencies to be overcome. – Mogador

@Mogador - If you ever find an optimum solution I'd love to know as looking to implement something very similar myself. – Hew

@Mogador any outcome on the following ? – Faulty

@Mogador what is the app that you mentioned above? – Faulty

Answer 1

Hopefully this helps you:

There is a closed issue about this topic in there that seems like it would work.

https://github.com/react-community/react-native-maps/issues/1685

Your example and proposal made me wonder whether or not you should just have the draggable markers be invisible but large and on the corners of the polygon.

Roanne

I'd looked at that previously. The code the OP posts uses the built in draggable markers, same as my example above. I am fairly certain that a successful solution to my problem will not use the built-in markers at all, so I'm editing my question to include that. That being said, invisible and large markers are worth trying, so I'll give it a shot. – Mogador