How to use ref prop and useRef with Lottie files in Typescript?

Question

EDIT: I realized this is actually working now, despite the error message! So I don't really need help with the implementation, but would like to know how to get rid of the error. Why is it giving me an error even though the code is working, and what should I change to get rid of it (unless I should just ignore it since the code is working?)? Would be really helpful as I'm learning Typescript to get an explanation on interpreting errors like this.

I'm using Typescript with React Native and I want to be able to only play up to a certain frame of my lottie file. Here's what I've tried:

const lottieRef = useRef<LottieView>();

useEffect(() => {
    if (lottieRef && lottieRef.current) {
      lottieRef.current.play(0, 120);
    }
  });

  return (
    <LottieView
      ref={lottieRef}
      source={SUCCESS.keepReading}
      autoPlay
      loop={false}
      style={styles.animationContainer}
    />
  );

And ref is underlined with this this long error message:

No overload matches this call.
  Overload 1 of 2, '(props: AnimatedLottieViewProps | Readonly<AnimatedLottieViewProps>): AnimatedLottieView', gave the following error.
    Type 'MutableRefObject<AnimatedLottieView | undefined>' is not assignable to type 'LegacyRef<AnimatedLottieView> | undefined'.
      Type 'MutableRefObject<AnimatedLottieView | undefined>' is not assignable to type 'RefObject<AnimatedLottieView>'.
        Types of property 'current' are incompatible.
          Type 'AnimatedLottieView | undefined' is not assignable to type 'AnimatedLottieView | null'.
            Type 'undefined' is not assignable to type 'AnimatedLottieView | null'.
  Overload 2 of 2, '(props: AnimatedLottieViewProps, context: any): AnimatedLottieView', gave the following error.
    Type 'MutableRefObject<AnimatedLottieView | undefined>' is not assignable to type 'LegacyRef<AnimatedLottieView> | undefined'.ts(2769)
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<AnimatedLottieView> & Readonly<AnimatedLottieViewProps> & Readonly<...>'
index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<AnimatedLottieView> & Readonly<AnimatedLottieViewProps> & Readonly<...>'

I'm new to typescript and lottie files, so I'm sorry if this is an obvious question! Thanks so much in advance!

Answer 1

Had to change to

const lottieRef = useRef<LottieView>(null);

and that fixed it!

Answer 2

Give it a try:

const lottieRef = useRef<LottieView | null>(null);

Answer 3

Why is it giving me an error even though the code is working

You have compile error, it has nothing to do with your run time which is correct (your run time is JavaScript code).

For example:

const foo = (str: string) => console.log(str);
// compile error, but run time (JS) is correct
foo(6);

What should I change to get rid of it

Supply a correct type, in useRef<LottieView>, LottieView is not the ref type, its the component name.

It also mentioned in the error itself what is the correct type:

'AnimatedLottieView | null'
useRef<AnimatedLottieView>(null)

unless I should just ignore it since the code is working

You maybe want to review why you need a TypeScript to begin with, if you find it unuseful and the typing is slowing you down instead of focusing on impact, you maybe don't need it (especially if you are a beginner).