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?

Vraisemblance

You might try changing the onRegionChange handler to be like this: onRegionChange={region => this.onRegionChange(region); } – Interpleader

Hi thanks for the reply. This hasn't worked unfortunately it is still stuttering and stuttering back to the original position of the map – Vraisemblance

Answer 1

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

Amero

perfect ,save my day..long live sir – Wag

Answer 2

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

Su

Yes, you can still keep your onRegionChangeComplete to save the region. Just don't call region={this.state.region} on every update too. – Robot

Answer 3

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.

Blayne