When this code is run the marker looks stuttering which is because onRegionChange has useState, does anyone know of a replacement? or if there is a replacement code for the marker so that it is in the middle and moves smoothly when the screen moves?
const MapScreen: React.FC<Props> = ({}) => {
const mapRef = useRef<MapView>(null);
const [loading, setLoading] = useState(false);
const initialRegion = {
latitude: 37.32470855,
longitude: -122.0209478,
latitudeDelta: 0.0922 / 64,
longitudeDelta: 0.0421 / 64,
};
const [currentRegion, setCurrentRegion] = useState<Region>({
latitude: 37.32470855,
longitude: -122.0209478,
latitudeDelta: 0.0922 / 64,
longitudeDelta: 0.0421 / 64,
});
const [address, setAddress] = useState<string>('');
const getAddress = async (region: LatLng) => {
try {
setLoading(true);
const res = await Geocoder.from(region.latitude, region.longitude);
const addressResult = res.results[0].formatted_address;
setAddress(addressResult);
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};
const handleRegionChange = (region: any) => {
setCurrentRegion(region);
setLoading(true);
};
const handleRegionChangeComplete = (region: Region) => {
getAddress(region);
setLoading(false);
};
console.log('Loading = ', loading);
return (
<>
<MapView
ref={mapRef}
style={styles.map}
initialRegion={initialRegion}
onRegionChange={handleRegionChange}
onRegionChangeComplete={handleRegionChangeComplete}>
<Marker
coordinate={currentRegion}
anchor={{x: 0.5, y: 0.5}}
shouldRasterizeIOS={true}>
{loading ? <LoadingMarker /> : <MarkerLotties />}
</Marker>
</MapView>
<View
style={{
position: 'absolute',
bottom: 20,
left: 0,
right: 0,
alignItems: 'center',
}}>
<Text style={{fontSize: 16, fontWeight: 'bold'}}>{address}</Text>
</View>
</>
);
};
how to make smooth when the screen is moved