animation-performance

Fix React Native Reanimated animation jank by applying prioritized guidelines for shared values and worklets to minimize frame drops and prevent memory leaks. The Skill provides curated checks to optimize animated styles and gestures.

Excessive re-renders during React Native animations occur when React renders are triggered unnecessarily. Apply greed-free re-render techniques using shared values and worklets to keep animation logic off the JavaScript thread.

Use worklets and shared values to maintain 60fps by running animation logic on the UI thread. The Skill outlines specific strategies for frame callbacks and gesture handlers to ensure smooth complex animated scenes.

You can apply these performance references to smooth-scrolling lists in React Native. The guidelines cover checks for gestures, lists, and complex scenes to help maintain consistent frame rates.

The best way to debug animation jank is to review prioritized guideline sections covering shared values, worklets, and frame callbacks. The Skill provides references to identify and resolve performance bottlenecks.