React Native : Programmatically Changing Region sample code for android
<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>