React Native Animations

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

---

Topics Covered

1. Installation

npm install react-native-reanimated react-native-gesture-handler

# babel.config.js
module.exports = {
  plugins: ['react-native-reanimated/plugin'],
};

2. Reanimated Basics

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function AnimatedBox() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const handlePress = () => {
    scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
  };