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

Question

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 wander how I can give a zoom value on that map. And how I can change the zoom value when user click a button on the map. What is the zoom API I should use to achieve this?

import React, {


AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Image,
  ListView,
  TextInput,
  TouchableHighlight,
  Dimensions,
 //MapView,
} from 'react-native';

import MapView from 'react-native-maps';

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

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}></TextInput>
                <MapView 
                    style={ styles.map }
                    mapType={"standard"}
                    region={this.state.region}
                    zoomEnabled={true}
                    scrollEnabled={true}
                    showsScale={true}
                  ></MapView>
            </View>
            )
    }
}

module.exports = MapPage;

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

Answer 2

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>