With React Native's MapView, how can I determine when I've reached my final drag destination?

Question

I have a Map with a pin that sits in the centre of the map. When I drag the map, the coordinates update, but the problem is that this triggers at every step of the moving process.

Instead, I'd like it to detect when the map movement has stopped and then return the address.

I've been trying to use onDragStart / onDragEnd but it hasn't worked so far.

<MapView
    style={{ alignSelf: 'stretch', height: 250 }}
    region={this.state.mapRegion}
    onRegionChange={this._handleMapRegionChange}
    draggable
    onSelect={() => console.log('onSelect', arguments)}
    onDrag={() => console.log('onDrag', arguments)}
    onDragStart={() => console.log('onDragStart', arguments)}

>
    <MapView.Marker
        coordinate={
            this.state.mapRegion
        }
    />

</MapView>

I've tried placing the drag actions on the MapView.Marker component but the console log doesn't trigger either way.

Is there a 'best practice' way to do this? I'm making a google maps API call to geocode the address and I don't want it to trigger each step of the position change.

score 2 · Accepted Answer · answered Nov 04 '18 at 22:50

2

You can use the callback prop onRegionChangeComplete from the doc MapView events

answered Nov 04 '18 at 22:50

Poptocrack

2,879
1
12
28

Thank you for that! – James Stewart Nov 04 '18 at 22:51
If you want to achieve a map following the user position, use `onRegionChange` and add a `setTimeOut` to your `useEffect`. Otherwise, the animation will start before the user ends the gesture. – Brogrammer Jul 18 '23 at 18:48

With React Native's MapView, how can I determine when I've reached my final drag destination?

1 Answers1