title: React Native : Programmatically Changing Region sample code for android
body: <p>I'm using react-native-maps package but not getting correct output,
  marker getting correctly moved but map is not updating accordingly</p>
  
  <p>map is remain same position as its initial region, how can we change region on the fly?</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    AppRegistry,
    TouchableOpacity,
    Animated,
  } from 'react-native';
  
  import MapView from 'react-native-maps';
  
  const { width, height } = Dimensions.get('window');
  
  const ASPECT_RATIO = width / height;
  const LATITUDE = 23.0123937;
  const LONGITUDE = 72.5227731;
  const LATITUDE_DELTA = 0.0922;
  const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
  let id = 0;
  let arb = 0.01;
  function randomColor() {
    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  }
  
  export default class ReactProject extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        coordinate: new MapView.AnimatedRegion({
          latitude: LATITUDE + ((Math.random() - 0.5) * (LATITUDE_DELTA / 2)),
          longitude: LONGITUDE + ((Math.random() - 0.5) * (LONGITUDE_DELTA / 2)),
        }),
      };    
    } 
  
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;MapView
            provider={this.props.provider}
            style={styles.map}
            initialRegion={{
              latitude: LATITUDE,
              longitude: LONGITUDE,
              latitudeDelta: LATITUDE_DELTA,
              longitudeDelta: LONGITUDE_DELTA,
            }}
          &gt;
            &lt;MapView.Marker.Animated
              coordinate={this.state.coordinate}
            /&gt;
          &lt;/MapView&gt;
          &lt;View style={styles.buttonContainer}&gt;
             &lt;TouchableOpacity
              onPress={() =&gt; this.setState(
                {
                  coordinate: new MapView.AnimatedRegion({
                    latitude: LATITUDE + arb++,
                    longitude: LONGITUDE + arb++ ,
                  })               
                }
              )}
              style={styles.bubble}
            &gt;
              &lt;Text&gt;Animate&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  } 
  
  ReactProject.propTypes = {
    provider: MapView.ProviderPropType,
  };
  
  const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      justifyContent: 'flex-end',
      alignItems: 'center',
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
    bubble: {
      backgroundColor: 'rgba(255,255,255,0.7)',
      paddingHorizontal: 18,
      paddingVertical: 12,
      borderRadius: 20,
    },
    latlng: {
      width: 200,
      alignItems: 'stretch',
    },
    button: {
      width: 80,
      paddingHorizontal: 12,
      alignItems: 'center',
      marginHorizontal: 10,
    },
    buttonContainer: {
      flexDirection: 'row',
      marginVertical: 20,
      backgroundColor: 'transparent',
    },
  });
  AppRegistry.registerComponent('ReactProject', () =&gt; ReactProject);
  </code></pre>
  
  <p>Anyone can help out for this specific example, it would very helpful for me to stuck out.</p>