'Lottie ref in Expo (react native)

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) 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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source