Lottie ref in Expo (react native)

Question

I am trying to move my existing React Native (typescript) project to Expo. Everything is working fine in Expo except modal with Lottie animation ( without expo it is working properly).

My code:

export const SuccessModal = ({isVisible = false, onAnimationFinish}: Props) => {
  let animation: any = React.createRef();

  useEffect(() => {
    if (isVisible) {
      animation.current.play();
    }
  }, []);

  return (
    <Modal
      visible={isVisible}
      backdropStyle={{backgroundColor: 'rgba(230, 228, 253, 0.5)'}}>
      <LottieView
        ref={animation}
        source={require('../assets/success-lottie.json')}
        style={{width: 300, height: 300}}
        autoPlay={true}
        loop={false}
        onAnimationFinish={onAnimationFinish}
      />
    </Modal>
  );
};

I guess the problem is with ref={animation} , because modal is being displayed, but animation is not moving - seems like animation.current.play() is not invoked in the effect. I tried useRef(null) and useRef<LottieView | null>(null) useRef<LottieView | null>(null) as suggested in other posts. Also tried to reinstall lottie with command: expo install lottie-react-native .

Any ideas what might be wrong here? What is so specific for Expo?

Answer 1

I think calling animation.current.reset(); before animation.current.play(); would do the trick.

I am using const animation = useRef(null) hook and got it working with Expo too.

However, initial play() was not working by default and I had did this trick to make it work as soon as component loads.

...
const animation = useRef(null);
...
useEffect(() => {
  animation.current?.reset();
  animation.current?.play();
}, []);