title: How to zoom in/out in react-native-map?
body: <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>