'How to zoom in/out in react-native-map?

I am using react-native to build a map application. The api I am using is from this link: https://github.com/lelandrichardson/react-native-maps.

Below is the code I bring the map on my app. I wonder how I can give a zoom value on that map. And how I can change the zoom value when the user clicks a button on the map.

What is the zoom API I should use to achieve this?

import React, { Component, StyleSheet, View, TextInput } from "react-native";
import MapView from "react-native-maps";

class MapPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 4.21048,
        longitude: 101.97577,
        latitudeDelta: 10,
        longitudeDelta: 5,
      },
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput style={styles.inputText}>Map</TextInput>
        <MapView
          style={styles.map}
          mapType={"standard"}
          region={this.state.region}
          zoomEnabled={true}
          scrollEnabled={true}
          showsScale={true}
        />
      </View>
    );
  }
}

module.exports = MapPage;

const styles = StyleSheet.create({
  map: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 30,
    flex: 1,
    alignItems: "center",
  },
  inputText: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: "#48BBEC",
    borderRadius: 8,
    color: "#48BBEC",
  },
});

react-native react-native-maps

Solution 1:^[1]

You should use the animateToRegion method (see here)

It takes a region object which has latitudeDelta and longitudeDelta. Use these to set the zoom level.

Updated:

in a Region object the latitude and longitude specify the center location and latitudeDelta and longitudeDelta specify the span of the viewable map area.

This image from this blog post illustrates it well (Lat? and Lng?).

Solution 2:^[2]

New React Native Maps API gives you option to call animateCamera method with zoom parameter.

const MapComponent= (props: any) => {

const map: LegacyRef<MapView> = useRef(null);

const onZoomInPress = () => {
    map?.current?.getCamera().then((cam: Camera) => {
        cam.zoom += 1;
        map?.current?.animateCamera(cam);
    });
};

return (
        <View>
            <MapView
                ref={map}
                provider={PROVIDER_GOOGLE}
                region={region}>
            </MapView>
            <ButtonComponent
                style={{position: 'absolute', bottom: 400, left: 0}}
                onPress={onZoomInPress}>
                Zoom In
            </MainButtonBlue>
        </View>
    );
}

Solution 3:^[3]

I was able to make this work using Dimensions.get('window');

            const window = Dimensions.get('window');
            const { width, height }  = window
            LONGITUDE_DELTA = LATITUD_DELTA + (width / height)

and by default set LATITUD_DELTA = 0.0922. Then just update this values with the prop onRegionChangeComplete in the <MapView>

Solution 4:^[4]

This is what I did and it worked out for me very well:

function getRegion(origin, destination, zoom) {
  const oLat = Math.abs(origin.latitude);
  const oLng = Math.abs(origin.longitude);
  const dLat = Math.abs(destination.latitude);
  const dLng = Math.abs(destination.longitude);

  return {
      latitude: (origin.latitude + destination.latitude) / 2,
      longitude: (origin.longitude + destination.longitude) / 2,
      latitudeDelta: Math.abs(oLat - dLat) + zoom,
      longitudeDelta: Math.abs(oLng - dLng) + zoom,
  };                                                                                  
}

Solution 5:^[5]

//Example of Pinch to Zoom Image in React Native
//https://aboutreact.com/react-native-pinch-to-zoom-image/

//import React in our code
import React from 'react';

//import all the components we are going to use
import { SafeAreaView, StyleSheet, View } from 'react-native';

//import ImageViewer which will help us to zoom Image
import ImageViewer from 'react-native-image-zoom-viewer';

const App = () => {
  const images = [
    {
      url:
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/sample_img.png',
    },
    {
      url:
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',
    },
  ];

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <ImageViewer imageUrls={images} renderIndicator={() => null} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    flex: 1,
  },
});

export default App;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Julien Ripet
Solution 2	Tomislav Brabec
Solution 3	Cristian Canales
Solution 4	krlozadan
Solution 5	houcin olmostaf

'How to zoom in/out in react-native-map?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]