CODEWITHSUNDEEP
react-nativereact-native-maps
MøĦâméd Ğhøùdiï
MøĦâméd Ğhøùdiï

Reputation: 191

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

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?

Upvotes: 6

Views: 2874

Answers (2)

ashuvssut
ashuvssut

Reputation: 2275

Whenever the user zooms in or out, the longitudeDelta changes. latitudeDelta DOES NOT change when zooming.

So, you can use onRegionChangeComplete event of <MapView/>


const _longitudeDelta = useRef<number | null>(null);

//--------------------------------------------------------------------
<MapView
  onRegionChange={({ longitudeDelta }) => {
    if (longitudeDelta !== _longitudeDelta.current) {
      console.log("user zoomed");
      _longitudeDelta.current = longitudeDelta;
    }
  }}
/>

Upvotes: 1

Reid
Reid

Reputation: 4534

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});
    }
  }

Upvotes: 4

Related Questions