How to Animate React Native Maps Properties With Reanimated 2

[zachgibson]

I'm using both React Native Maps and Reanimated v2. I've tried animating the camera via animated props and animated ref but nothing is happening with the map. Do 3rd party libs like this one need some internal mechanism to work with animated values?

[rawatnaresh]

did you find any solution? @zachgibson

[zachgibson]

Yes. It works quite well. There's a way print all animate-able properties for a given component, but here's one small example.

You have to create an Animated Map View, then use animated props to animate your property.

...
const AnimatedMapView = Animated.createAnimatedComponent(MapView);
...
const animatedProps = useAnimatedProps(() => ({
  mapPadding: {
    bottom: animatedBottomMapPadding.value,
  },
}));
...
<AnimatedMapView
  {...props}
  animatedProps={animatedProps}
/>

P.S. our team noticed some older versions of Reanimated don't support nested objects in hooks like useAnimatedProps on Android. We had to stringify the object and then patch the RN Maps Java code to parse it.

[rawatnaresh]

Thank you so much. It works.

[sahiln13]

This seems to be screwing with the map on any state change, are either of you guys experiencing this issue?

[rawatnaresh]

yeah. What error are you getting? I got an crash related to mapPadding after updating RN to latest. and it happened only in some android devices when the animatedProps was updating before the map was loaded.

const { useEffect } = require('react');

const AnimatedMapView = Animated.createAnimatedComponent(MapView);

const mapReadyRef = useRef(false);
const animatedProps = useAnimatedProps(() => {
  if (mapReadyRef.current) {
    return {
      mapPadding: {
        bottom: animatedBottomMapPadding.value,
      },
    };
  } else {
    return {
      mapPadding: {
        bottom: 0,
      },
    };
  }
});

useEffect(() => {
  return () => {
    mapReadyRef.current = false;
  };
});

<AnimatedMapView
  {...props}
  onMapReady={() => {
    mapReadyRef.current = true;
  }}
  animatedProps={animatedProps}
/>;