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
More from pluginagentmarketplace/custom-plugin-react-native
react-native-testing
Master testing - Jest, Testing Library, Detox E2E, and CI/CD integration
78react-native-navigation
Master React Navigation - stacks, tabs, drawers, deep linking, and TypeScript integration
58react-native-basics
Master React Native fundamentals - components, styling, layout, and Expo
37react-native-state
Master state management - Redux Toolkit, Zustand, TanStack Query, and data persistence
35react-native-native-modules
Master native modules - Turbo Modules, JSI, Fabric, and platform bridging
31react-native-deployment
Master deployment - EAS Build, Fastlane, App Store, Play Store, and OTA updates
24