React native Question posted in
The official React Native documentation can be found here.

React native – Using Keyframe from react-native-reanimated causes app crash

Just upgraded "react-native-reanimated" to v3.6.1 and now all my Keyframe animations make the app crash without showing any error even on emulator.

 export const SampleKeyframe = new Keyframe({
  from: {
    transform: [{ rotate: '0deg' }],
  },
  to: {
    transform: [{ rotate: '45deg' }],
  },
});

Using it in a simple animated view

UPDATE: It seems that "transform" is whats causing the crash as using other props like "opacity" works. Still can’t figure out why transform doesn’t.

Tags:

2

Answers


  1. 0

    I have the same issue, which blocks me to upgrade from Expo v49 to v50 with all related libs. Still figuring out.

    I have rewritten some animations using useAnimatedStyle instead of Keyframe, so some issues gone (even with using transform), but I don’t want to abandon all Keyframe usages at all, that’s not a soluion.

    Login or Signup to reply.
  2. 0

    if you add ‘worklet’ in makeKeyframeKey function, it will resolve your crash.

    File: Reanimated/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts

    function makeKeyframeKey(index: number, transformProp: string) {
    ‘worklet’;
    return ${index}_transform:${transformProp};
    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search