0

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

0 Answers0