How to animate the MarkerView?

[timweii]

Hello, I'd like to request an enhancement for animating the MarkerView using react-native-reanimated. This feature has been successfully implemented in rnmapbox/maps. That would be great if we can also have this feature available in maplibre-react-native as well. Could this enhancement be considered?

Thanks!

Reference:
Discussion: rnmapbox/maps#3097
Commit: jleprinc/rnmapbox-animation@71819c7

[tyrauber]

Hi @timweii, I have done this in rnmapbox/maps without modifying the library, and the same should work in maplibre-react-native using react-native-reanimated createAnimatedComponent and useAnimatedProps.

Something like this should work:

import Animated, { useAnimatedProps } from 'react-native-reanimated';
import { createAnimatedPropAdapter } from 'react-native-reanimated/src/reanimated2/PropAdapters';

 const [followPoint, setFollowPoint] = useState(null);
const AnimatedShape = Animated.createAnimatedComponent(Maplibre.ShapeSource);

  const animatedProps = useAnimatedProps(
    () => {
      const shape = {
              type: 'FeatureCollection',
              features: [
                {
                  type: 'Feature',
                  properties: {
                    type: 'generalMarker',
                    icon: 'example',
                    id: 'generalMarker'
                  },
                  geometry: {
                    type: 'Point',
                    coordinates: followPoint
                  },
                },
              ],
            }
      return { shape };
    },
    null,
    shapeAdapter
  );

    <AnimatedShape id="exampleShapeSource" animatedProps={animatedProps}>
      <MapLibre.CircleLayer id="singlePoint" style={layerStyle.singlePoint} />
    </AnimatedShape>

[timweii]

Hi @tyrauber, thank you for getting back to me. I've created a basic animation component to try out your code (see attached below). However, it throws an error when the second followPoint is passed.
Exception in HostFunction: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'shape' of a view managed by: RCTMGLShapeSource

I am wondering if it encounters a similar issue when attempting to animate a marker view:
In the android/rctmgl/src/main/java/com/mapbox/rctmgl/components/annotation/RCTMGLMarkerViewManager.java file, the setCoordinate method expects a geoJSON string. However, in the current version of rnmapbox/maps, it's expecting an array - so the animation can update the props success because they are the same format?
Could this difference potentially cause failure?

Similarly, in components/ShapeSource.tsx, the RCTMGLShapeSource expects shape props as a JSONString. but during animation, it updates the shape with a geoJSON object instead of a JSONString, which could lead to failures?

import Animated, { useAnimatedProps, useSharedValue } from 'react-native-reanimated';
import { ShapeSource, CircleLayer } from '@app/lib/map';
import { useEffect } from 'react';

const layerStyle = {
  singlePoint: {
    circleRadius: 5,
    circleColor: '#FF6347',
    circleStrokeWidth: 1,
    circleStrokeColor: '#FFFFFF',
  },
};
const AnimatedShape = Animated.createAnimatedComponent(ShapeSource);

export default ({ followPoint }) => {
  const animatedFollowPoint = useSharedValue(followPoint);

  useEffect(() => {
    animatedFollowPoint.value = followPoint;
  }, [followPoint]);

  const animatedProps = useAnimatedProps(
    () => ({
      shape: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              type: 'generalMarker',
              id: 'generalMarker',
            },
            geometry: {
              type: 'Point',
              coordinates: animatedFollowPoint.value,
            },
          },
        ],
      },
    }),
    [animatedFollowPoint]
  );

  return (
    <AnimatedShape id='exampleShapeSource' animatedProps={animatedProps}>
      <CircleLayer id='singlePoint' style={layerStyle.singlePoint} />
    </AnimatedShape>
  );
};

[tyrauber]

Hi @timweii, You are correct. The native libraries are expecting JSON, but the JS API should handle the conversion.

If you look at ShapeSource, it says it accepts a GeoJSON geometry, a feature, or a feature colllection and setNativeProps converts the GeoJSON to a JSON string before passing it to the native library, so that should be ok.

But, try whitelisting the native props:

const AnimatedShape = Animated.createAnimatedComponent(ShapeSource);
//Animated.addWhitelistedUIProps({ shape: true });
Animated.addWhitelistedNativeProps({ shape: true });

If that doesn't work, try converting the shape prop to JSON manually:

const shapeAdapter = createAnimatedPropAdapter((props) => {
  props.shape = JSON.stringify(props.shape);
})

Let me know what you find!

[kkx64]

shapeAdapter worked perfectly, thanks for this answer!

[timweii]

Thank you @tyrauber! Animated.addWhitelistedNativeProps({ shape: true }) works perfectly. Closing this issue now.

[lpatrun]

Has anyone tried this with the new arch?

I have copied this solution but I keep getting:
Warning: Error: Argument appears to not be a ReactComponent. Keys: features,getClusterExpansionZoom,getClusterLeaves,getClusterChildren,setNativeProps,onPress,_nativeRef

Am I missing something?
@tyrauber @timweii

This is the code:

import { CircleLayer, ShapeSource } from '@maplibre/maplibre-react-native'
import Animated, {
  createAnimatedPropAdapter,
  useAnimatedProps,
} from 'react-native-reanimated'

const AnimatedShape = Animated.createAnimatedComponent(ShapeSource)
Animated.addWhitelistedNativeProps({ shape: true })

const shapeAdapter = createAnimatedPropAdapter(props => {
  props.shape = JSON.stringify(props.shape)
})

export default function AnimatedMapComponent() {
  const animatedProps = useAnimatedProps(
    () => ({
      shape: {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {
              type: 'generalMarker',
              id: 'generalMarker',
            },
            geometry: {
              type: 'Point',
              coordinates: [0, 0],
            },
          },
        ],
      },
    }),
    null,
    shapeAdapter,
  )

  return (
    <AnimatedShape id="navigationShapeSource" animatedProps={animatedProps}>
      <CircleLayer id="singlePoint" style={circleStyle} />
    </AnimatedShape>
  )
}

const circleStyle = {
  circleRadius: 5,
  circleColor: '#FF6347',
  circleStrokeWidth: 1,
  circleStrokeColor: '#FFFFFF',
}

[Suchy2023]

Did any of you find the answer to this?