Building Smooth 60fps Animations in React Native

Animations are crucial for creating delightful user experiences in mobile apps. In this guide, we'll explore how to build buttery-smooth 60fps animations using React Native Reanimated 2.

Why Reanimated 2?

React Native's built-in Animated API runs on the JavaScript thread, which can lead to dropped frames during complex interactions. Reanimated 2 runs animations on the UI thread, ensuring smooth performance even during heavy JavaScript operations.

Getting Started

First, install the required dependencies:

npm install react-native-reanimated

Basic Animation Example

Here's a simple fade-in animation:

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

function FadeInView({ children }) {
  const opacity = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: withTiming(opacity.value, { duration: 1000 }),
    };
  });

  React.useEffect(() => {
    opacity.value = 1;
  }, []);

  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
}

Advanced Techniques

Gesture-Based Animations

Combine Reanimated with react-native-gesture-handler for interactive animations:

import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { useAnimatedGestureHandler, useSharedValue } from 'react-native-reanimated';

function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.startX = translateX.value;
      ctx.startY = translateY.value;
    },
    onActive: (event, ctx) => {
      translateX.value = ctx.startX + event.translationX;
      translateY.value = ctx.startY + event.translationY;
    },
  });

  // ... animated style implementation
}

Performance Tips

Use useSharedValue for values that change frequently
Avoid inline styles in animated components
Use runOnUI for complex calculations
Enable Hermes for better performance
Profile with React DevTools to identify bottlenecks

Common Pitfalls

Don't mix Animated API with Reanimated
Avoid heavy computations in animation callbacks
Use worklets directive for functions run on UI thread

Conclusion

With Reanimated 2, creating smooth 60fps animations in React Native is achievable and maintainable. The key is understanding the difference between the JS and UI threads and leveraging the library's capabilities effectively.