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?