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. :)