react-native-animations

SKILL.md

Build smooth 60fps animations combining Reanimated 3, Gesture Handler, and layout transitions.

Master Reanimated's shared values, animated styles, and timing functions (withSpring, withTiming, withDecay) for declarative animations

Handle complex gestures like pan, pinch, and rotation using Gesture Handler, then synchronize them with animations via shared values

Implement entering/exiting animations and layout transitions using FadeIn, FadeOut, and Layout.springify() for dynamic lists and UI changes

Optimize performance by understanding worklet directives, runOnJS boundaries, and avoiding frame drops on low-end devices

React Native Animations Skill

Learn high-performance animations using Reanimated 3, Gesture Handler, and layout animations.

Prerequisites

React Native basics

Understanding of JavaScript closures

Familiarity with transforms and styles

Learning Objectives

After completing this skill, you will be able to:

 Create smooth 60fps animations with Reanimated

 Handle complex gestures with Gesture Handler

 Implement layout entering/exiting animations

 Optimize animations for performance

 Combine gestures with animations