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

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Δ).