react-native-animations

Installation
Summary

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
SKILL.md

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
Related skills
Installs
508
GitHub Stars
7
First Seen
Jan 21, 2026