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

1397 views google-maps
8

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.

answered question

1 Answer

1

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

posted this

Have an answer?

JD

Please login first before posting an answer.