How to zoom in / out on a reaction-native map?

Question

I am using action-native to create a map application. I am using the api from this link: https://github.com/lelandrichardson/react-native-maps . Below is the code in which I will give the map in my application. I wander how I can give a zoom value on this map. And how can I change the zoom value when the user clicks a button on the map. What is the scaling API that 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 )

A region object is required that has latitudeDelta and longitudeDelta . Use them to set the zoom level.

Updated:

in the Region object, latitude and longitude specify the central location and latitudeDelta and longitudeDelta specify the range of the visible area of ​​the map.

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

Answer 2

I managed to do 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 these values ​​with prop onRegionChangeComplete in <MapView>