React Native Reanimated: Unlocking Smooth UI Performance

software-mansion/react-native-reanimated

Hey there, fellow software engineers! Are you looking to take your React Native animations to the next level? While the built-in Animated library is good, you've probably run into its limitations, especially with complex animations or performance-critical interactions. That's where React Native Reanimated comes in.

Reanimated isn't just a reimplementation of Animated; it's a fundamental shift in how animations are handled in React Native. Instead of running animations on the JavaScript thread, Reanimated allows them to run natively on the UI thread. This means buttery-smooth animations, even under heavy load, and a significant boost in performance.

From a software engineer's perspective, Reanimated offers several key advantages

Unrivaled Performance
This is the biggest selling point. By offloading animations to the native UI thread, Reanimated eliminates the common JavaScript thread bottlenecks that can lead to dropped frames and janky animations. This is crucial for creating truly delightful user experiences.

Declarative API
Reanimated provides a powerful and intuitive declarative API that makes it easier to express complex animation logic. You define what you want to animate, and Reanimated handles the how.

Shared Values
Reanimated introduces the concept of shared values, which are pieces of data that can be accessed and modified from both the JavaScript and UI threads. This is incredibly powerful for synchronizing animations with gestures, scroll positions, and other dynamic data.

Worklets
For advanced scenarios, Reanimated allows you to write worklets – small JavaScript functions that can be executed directly on the UI thread. This gives you fine-grained control over animation logic and enables highly customized behaviors.

Gesture Handling Integration
Reanimated plays exceptionally well with react-native-gesture-handler, allowing you to create highly interactive and responsive UIs where gestures drive animations seamlessly.

Adding Reanimated to your project is straightforward.

First, install the library

yarn add react-native-reanimated

Or with npm

npm install react-native-reanimated

Next, you need to make a small modification to your babel.config.js file to include the Reanimated Babel plugin. This plugin is essential for enabling the "workletization" of your animation code.

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // This line is important!
  ],
};

Important
If you're using Reanimated 3 or higher, ensure the Reanimated plugin is the last plugin in your plugins array.

Finally, for iOS, you might need to run pod install in your ios directory to link the native modules

cd ios && pod install && cd ..

Let's look at a basic example of animating a box's horizontal position.

import React from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

function AnimatedBox() {
  // 1. Create a shared value to control the box's X position
  const offsetX = useSharedValue(0);

  // 2. Define an animated style based on the shared value
  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offsetX.value }],
    };
  });

  // 3. Function to animate the box
  const handlePress = () => {
    // Animate offsetX to 100 with a spring animation
    offsetX.value = withSpring(offsetX.value === 0 ? 100 : 0);
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
      <Button onPress={handlePress} title="Toggle Animation" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'dodgerblue',
    borderRadius: 10,
    marginBottom: 20,
  },
});

export default AnimatedBox;

Let's break down this example

useSharedValue(0)
We initialize a shared value called offsetX with an initial value of 0. This value will represent the horizontal offset of our box. Changes to this value will drive the animation.

useAnimatedStyle(() => { ... })
This hook allows us to define styles that will be animated. The function passed to useAnimatedStyle runs on the UI thread, making the animation smooth. We're transforming the translateX property based on the offsetX.value.

withSpring(offsetX.value === 0 ? 100 : 0)
This is an animation modifier. Instead of directly setting offsetX.value, we wrap it with withSpring. This tells Reanimated to animate the change using a spring physics simulation, resulting in a more natural and bouncy motion. We're toggling the target position between 0 and 100.

<Animated.View style={[styles.box, animatedStyles]} />
We use Animated.View (or Animated.Text, Animated.ScrollView, etc.) to wrap the component we want to animate. We then pass our animatedStyles to its style prop.

This simple example just scratches the surface of what Reanimated can do. Here are some areas you'll want to explore next

withTiming, withDecay, withRepeat
Explore other animation modifiers for different easing curves, decaying animations, and repeating animations.

Gestures and react-native-gesture-handler
Integrate Reanimated with react-native-gesture-handler to create interactive animations driven by user gestures like panning, swiping, and pinching. This is where Reanimated truly shines for building highly responsive UIs.

Worklets
For advanced scenarios and custom animation logic, delve into writing worklets. This allows you to execute arbitrary JavaScript code directly on the UI thread, giving you ultimate control.

Shared Element Transitions
Reanimated can be used to create stunning shared element transitions between screens, providing a seamless navigation experience.

Layout Animations
Reanimated offers powerful tools for animating layout changes, making your UI feel more dynamic and alive when elements are added, removed, or resized.

Reanimated is an incredibly powerful library that will fundamentally change how you approach animations in React Native. By embracing its principles and tools, you'll be able to build highly performant, fluid, and engaging user interfaces that truly stand out.