reanimated-skia-performance
Installation
Summary
High-performance React Native animations and 2D graphics with Reanimated v4 and Shopify Skia.
- Covers gesture-driven interactions, spring/timing transitions, layout animations, and Reanimated CSS transitions/keyframe animations without custom worklets
- Supports Skia Canvas scenes with runtime effects, shader uniforms, path interpolation, and animated drawing primitives
- Includes dev-mode tuning panels with sliders for real-time animation config and shader uniform adjustment
- Provides performance diagnostics for animation jank, JS thread stalls, excessive re-renders, and per-frame memory allocation
- Enforces UI-thread state management via
useSharedValueanduseDerivedValueto minimize JS↔UI crossings
SKILL.md
Reanimated + Skia Performance
Defaults
- Keep animation state on the UI thread:
useSharedValue,useDerivedValue, worklets. - Prefer Reanimated v4 declarative APIs; avoid legacy
Animated. - Prefer
shared.get()/shared.set()overshared.valuein app code (React Compiler friendly). - Minimize JS↔UI crossings: avoid
scheduleOnRN/runOnJSexcept for unavoidable side effects. - For Skia, avoid per-frame React renders: pass
SharedValues directly to Skia props/uniforms.