MapView is not scrolling on changing coordinates in React Native

Issue

I want to change my Map Location by clicking on "Locate me" Button, "Locate me" fetch my current coordinates and set in the react state. But the problem is that by clicking on "Locate Me" button, my map position is not changing while my marker positions has been changed

Image before clicking on "Locate me" button

Image after clicking on "Locate me" button, here my maker is move to the current coordinates but map is still at the same position(i.e old coordinates)

// Location Component
import React, { Component, Fragment } from 'react';
import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, Modal, Image, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
import { Icon, Button } from 'react-native-elements';
import * as Permissions from 'expo-permissions';
import MapView from 'react-native-maps';
import LocationIQ from 'react-native-locationiq';
import { Ionicons } from '@expo/vector-icons';

const { width, height } = Dimensions.get('window');

class LocationComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      region: {
        latitude: 23.0759837,
        longitude: 72.8776559,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421
      }
    }
    this.onRegionChange = this.onRegionChange.bind(this);
    this.currentLocation = this.currentLocation.bind(this);
  }

  currentLocation = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    var finalStatus = status;
    while (finalStatus !== 'granted') {
      let { stat } = await Permissions.askAsync(Permissions.LOCATION);
      finalStatus = stat
    }
    if (finalStatus == 'granted') {
      let lat;
      let long;
      navigator.geolocation.getCurrentPosition((position) => {

        lat = position.coords.latitude;
        long = position.coords.longitude;

        if (lat && long) {
          const region = {
            latitude: lat,
            longitude: long,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          }
          this.setState({ region: region });
        }
      }, (error) => {
        console.error("Error Code = " + error.code + " - " + error.message);
      });
    }

  }
  onRegionChange(region) {
    this.setState({ region });
  }

  render() {
    return (
      <KeyboardAvoidingView>
          
        <ScrollView style={{ flexDirection: 'column' }}>
          <View style={{ height: 680, paddingTop: 30 }}>
            <MapView
              style={{
                flex: 1
              }}
              initialRegion={this.state.region}
              zoomEnabled={true}
              scrollEnabled={true}
              showsScale={true}
              showsUserLocation={true}
              showsMyLocationButton={true}
              showsScale={true}
              showsCompass={true}
              loadingIndicatorColor="blue"
              onRegionChange={() => this.onRegionChange()}
              onMapReady={this.onMapReady}
              onRegionChangeComplete={this.onRegionChange}
            >
              <MapView.Marker
                coordinate={{
                  latitude: this.state.region.latitude,
                  longitude: this.state.region.longitude,
                }}
                title={"Location"}
                draggable />
            </MapView>
            <TouchableOpacity activeOpacity={0.5} onPress={this.currentLocation} style={styles.TouchableOpacityStyle} >
              <Ionicons name="md-locate" size={24} color="red" />
            </TouchableOpacity>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  TouchableOpacityStyle: {

    position: 'absolute',
    width: 50,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    right: 20,
    bottom: 20,
    backgroundColor: 'white',
    borderRadius: 25
  },

  FloatingButtonStyle: {
    width: 50,
    height: 50,
  },

});

export default LocationComponent;

Solution

You need to animate your map with the API given by react-native-maps when you change the position of your marker.

Answered By - docmurloc