How to animate marker on position change.

[Jeius]

I wasn't able to animate a marker even when I change the marker.coordinate. Am I doing it wrong?

import { callback } from 'react-native-nitro-modules';
import { useCurrentLocation } from '@/hooks/location/useLocation';

// ... some constants

export default function MapView(props: Props) {
  const { children, hideUserLocationMarker = false, ...rest } = props;

  const { location: currentLoc } = useCurrentLocation(); // Custom implementation using expo-location

  const initialLoc: RNLocation = useMemo(() => {
    if (!currentLoc?.coords) return DEFAULT_LOCATION;
    return {
      center: {
        latitude: currentLoc.coords.latitude,
        longitude: currentLoc.coords.longitude,
      },
      altitude: currentLoc.coords.altitude || 0,
      accuracy: currentLoc.coords.accuracy || 0,
      bearing: currentLoc.coords.heading || 0,
      speed: currentLoc.coords.speed || 0,
      time: currentLoc.timestamp || 0,
    };
  }, [currentLoc]);

  const initialProps: RNInitialProps = useMemo(
    () => ({
      camera: {
        center: initialLoc.center,
        zoom: 16,
      },
    }),
    [initialLoc.center]
  );

  const [locationUpdates, setLocationUpdates] = useState<RNLocation>(initialLoc);

  const userLocationMarker: RNMarker | null = useMemo(() => {
    if (hideUserLocationMarker) return null;
    return {
      id: USER_MARKER_ID,
      coordinate: locationUpdates.center,
      title: 'You are here',
    };
  }, [hideUserLocationMarker, locationUpdates.center]);

  const markers = useMemo(() => {
    return userLocationMarker ? [userLocationMarker, ...(props.markers || [])] : props.markers;
  }, [props.markers, userLocationMarker]);

  return (
    <Box className="flex-1">
      <GoogleMapsView
        // ... other props
        markers={markers}
        onLocationUpdate={callback((loc: RNLocation) => {
          setLocationUpdates(loc);
        })}
      />
      {children}
      //... spinner
    </Box>
  );
}

[ChromeQ]

May I suggest adding ts or js to your codeblock @Jeius - just type ts or js directly after the triple backtick at the top of the codeblock ```ts

import { callback } from 'react-native-nitro-modules';

vs

import { callback } from 'react-native-nitro-modules';

[Jeius]

Oh I see, now it looks pretty. Thanks for the tip @ChromeQ

[pinpong]

@Jeius checkout the dev branch, there is a Markers screen with an example of a marker animation.

[Jeius]

I see, that makes sense now. So essentially, we’re responsible for animating the coordinate values themselves, rather than just passing updated coordinates to the marker. It’s not exactly straightforward, but using Reanimated should make it manageable.

If I understand correctly, updating the marker’s coordinate state directly would trigger a full re-render of the map view, right? I’m wondering whether that might lead to performance issues, especially when dealing with a large number of markers (e.g., 1000+).

[pinpong]

If you want to understand the implementation in detail, please take a look at the native code. This package follows a different approach compared to other maps libraries.

See: MapMarkerBuilder.kt

It uses an efficient icon-caching mechanism for custom markers. Handling a large set of ~1000 markers is not an issue.

However, if you are using a large number of unique custom marker icons, you may run into performance limitations - this is a constraint of the underlying render engine and the Google Maps SDK, not the wrapper.

[Jeius]

Thank you for the thorough explanation. I appreciate the guidance — I’ll review the native implementation in MapMarkerBuilder.kt to gain a deeper understanding of the icon-caching strategy.

[Jeius]

I’ve created a simple reusable hook for animating a LatLng coordinate using Reanimated — hopefully it’ll be useful to others too!

import { useCallback, useState } from 'react';
import { type RNLatLng } from 'react-native-google-maps-plus';
import {
  Easing,
  SharedValue,
  useAnimatedReaction,
  useSharedValue,
  withTiming,
  type WithTimingConfig,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';

export function useAnimatedLatLng(initialLatLng: RNLatLng) {
  const animatedLat = useSharedValue(initialLatLng.latitude);
  const animatedLng = useSharedValue(initialLatLng.longitude);

  const [latlng, setLatLng] = useState<RNLatLng>(initialLatLng);

  const animateTo = useCallback(
    (
      latlng: RNLatLng,
      config: WithTimingConfig = { easing: Easing.inOut(Easing.ease), duration: 300 }
    ) => {
      const animateValue = (sharedValue: SharedValue<number>, toValue: number) => {
        if (!toValue) return;
        sharedValue.value = withTiming(toValue, config);
      };

      animateValue(animatedLat, latlng.latitude);
      animateValue(animatedLng, latlng.longitude);
    },
    [animatedLat, animatedLng]
  );

  useAnimatedReaction(
    () => ({
      latitude: animatedLat.value,
      longitude: animatedLng.value,
    }),
    (current, prev) => {
      if (current.latitude !== prev?.latitude || current.longitude !== prev.longitude) {
        scheduleOnRN(setLatLng, current);
      }
    },
    []
  );

  return { animatedLatLng: latlng, animateTo };
}

Usage

import { callback } from 'react-native-nitro-modules';

export default function MapView({ children, ...props }) {
  const { animatedLatLng, animateTo } = useAnimatedLatLng(INITIAL_LATLNG);

  const userLocationMarker: RNMarker = useMemo(() => ({
      id: USER_MARKER_ID,
      coordinate: animatedLatLng,
      title: 'You are here',
    }), [animatedLatLng]);

  const markers = useMemo(() => [userLocationMarker, ...(props.markers || [])], [props.markers, userLocationMarker]);

  return (
    <View>
      <GoogleMapsView
        // ...rest of props...
        hybridRef={callback((ref) => (props.mapRef.current = ref))}
        markers={markers}
        onLocationUpdate={callback(({ center }: RNLocation) => {
          animateTo(center);
        })}
      />
      {children}
    </View>
  );
}