/animate — Implement Animations

You are executing the

/animate

Process

1. Understand the animation goal — What should animate? Transition, gesture, layout change, micro-interaction?

2. Choose the right tool:

   • Reanimated — Complex, performance-critical animations (runs on UI thread)
   • Animated (built-in) — Simple opacity/transform (limited, prefer Reanimated)
   • LayoutAnimation — Automatic layout transitions
   • Moti — Declarative animations with Reanimated under the hood
   • CSS transitions (NativeWind v5) — Simple state-driven transitions

3. Implement with worklets — Keep animation logic on the UI thread:

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

const offset = useSharedValue(0);

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

4. Add gesture interaction (if applicable):

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const pan = Gesture.Pan()
  .onUpdate((e) => {
    offset.value = e.translationX;
  })
  .onEnd(() => {
    offset.value = withSpring(0);
  });

5. Verify performance:
   • Use

     useFrameCallback

     or FPS monitor to confirm 60fps
   • Check that worklets don't bridge to JS thread
   • Test on low-end devices

Animation Patterns Reference

withTiming

withSpring

Gesture.Pan

useAnimatedStyle

expo-router

entering

exiting

useAnimatedScrollHandler

Output

• Animation implementation code
• Performance verification notes
• Gesture integration (if applicable)