React Native Maps - OnRegionChange stutters the map

Question

I'm having a weird issue with the React Native Maps library. At the moment when I follow all the documentation correctly, every time I move the map, it appears to stutter and move back to the original location. Or sporadically it will move to the location I want to (With stutter)

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import MapView from "react-native-maps";
import Geolocation from 'react-native-geolocation-service';
import {YellowBox} from 'react-native';

type Props = {};
export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            region: {
                latitude: 53.41058,
                longitude: -2.97794,
                latitudeDelta: 0.1,
                longitudeDelta: 0,
            }
        }
    }

    componentDidMount() {
        Geolocation.getCurrentPosition(
            (position) => {
                console.warn(position.coords.latitude);
                console.warn(position.coords.longitude);
                this.setState({
                    region: {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        latitudeDelta: 0.02,
                        longitudeDelta: 0,
                    }
                });
            },
            (error) => {
                console.warn(error.code, error.message);
            },
            {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000},
        )
    }

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

    render() {
        return (
            <MapView
                style={styles.map}
                region={this.state.region}
                showsUserLocation={true}
                onRegionChange={region => {
                    this.setState({region});
                }}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
});

However, if I change onRegionChange to onRegionChangeCompleted, I can move around the map just fine. But then I cannot tilt and when I turn the map using my fingers it will sometimes snap back to the original location.

Has anyone else had this weird issue or is there something I'm doing wrong?

Answer 1

Change onRegionChange to onRegionChangeComplete and it should work smoothly as expected now. :)

Answer 2

for anyone that couldn't solve the problem with the above answers, this answer on https://github.com/react-native-maps/react-native-maps/issues/3639 from @jalasem worked for me, here is a condensed version:

import React, { useEffect, useRef } from 'react'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

const INITIAL_REGION = {
  latitude: 44.49317207749917,
  longitude: 20.896348971873522,
  latitudeDelta: 4.136923536294034,
  longitudeDelta: 5.68705391138792,
}

const Map = ({ location }) => {
  const mapRef = useRef(null)

  useEffect(() => {
    // receive a point on the map through props
    if (location) {
      console.log('change location, location: ', location)
      mapRef.current.animateToRegion({
        latitude: location.latitude,
        longitude: location.longitude,
        latitudeDelta: 0.2,
        longitudeDelta: 0.2,
      })
    }
  }, [location])

  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      initialRegion={INITIAL_REGION}
      ref={mapRef}
    />
  )
}

export default Map

I needed a way to change the location if a user clicked on a button outside the map, while also being able to move around the map freely, so this solution worked best for me.

Answer 3

Removing region = {this.state.region} from MapView solved this for me.