How to zoom in/out in react-native-map?
<p>I am using <code>react-native</code> to build a map application. The api I am using is from this link: <a href="https://github.com/lelandrichardson/react-native-maps" rel="nofollow noreferrer">https://github.com/lelandrichardson/react-native-maps</a>.</p>
<p>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.</p>
<p>What is the zoom API I should use to achieve this?</p>
<pre class="lang-js prettyprint-override"><code>import React, { Component, StyleSheet, View, TextInput } from &quot;react-native&quot;;
import MapView from &quot;react-native-maps&quot;;

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

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

module.exports = MapPage;

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

</code></pre>