How can I use lottie animation in GestureHandler React-native

Question

Today I want to use lottie animation in GestureHandler from react-native reanimated as I said above. But something went wrong. When i call lottie.current.play(0, 15); for exemple code -

const gestureHandler = useAnimatedGestureHandler({
    onStart: (_) => {
lottie.current.play(0, 15);    
},
    onActive: () => {
    },
    onEnd: (_) => {
    },
  });

I got error

ERROR TypeError: null is not an object (evaluating 'lottie.current.play')

I can't understand why?

I have made a reference to the object

  const lottie = useRef();
 .
 .
 .
       <Lottie
            source={require("./assets/cart.json")}
            style={{ width: 100, height: 100, alignSelf: "center" }}
            autoPlay={false}
            loop={false}
            ref={lottie}
            resizeMode="contain"
          />

Also found that I can use lottie.current.play(0, 15); the function in React.useEffect but why i cant use in in this events onStart, onActive, onEnd

score 0 · Answer 1 · answered Jan 06 '23 at 20:26

Basically onStart, onActive and onEnd are full-fledged worklets, i.e. javascript functions that will be executed on the UI Thread. Consequently if you have functions that can only be executed on the javascript thread and need to be launched from a worklet it must always be specified with runOnJS.

So i should -

  const playAnim = (num) => {
    lottie.current.play(num);
  }; 
  runOnJS(playAnim)(15);

How can I use lottie animation in GestureHandler React-native

1 Answers1