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!