How to know when user zooming in/out of the map in react-native-maps?

Question

Is there any way to know if the user is zooming in or out of the map in react-native-maps?

How do I get the zoom level or the updated latitudeDelta?

Answer 1

To know when the user is zooming (or changing any part of the region) you can add a callback to listen for the region changing (onRegionChange). In the callback you have access to the new region's data:

latitude: number;
longitude: number;
latitudeDelta: number;
longitudeDelta: number;

To find if the user zoomed or not, we just have to look at either latitudeDelta or longitudeDelta and compare that to what it was previously.

The callback can be implemented as shown below:

In the render function

  <MapView
    onRegionChange={this.onRegionChange}
  />

In the class

  onRegionChange = region => {
    if(region.latitudeDelta !== this.state.latitudeDelta){
      //user zoomed
      this.setState({latitudeDelta: region.latitudeDelta});
    }
  }