Getting Started with React Native Reanimated 3: Basic Animations

In this tutorial, we'll explore the fundamentals of animations in React Native using the Reanimated library. We'll create a simple yet effective animation that combines opacity, scaling, and rotation effects on a basic shape.

You can find the completed code here.

Setting Up the Foundation

First, let's look at our essential imports and basic setup:

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  withRepeat,
  SharedValue,
} from "react-native-reanimated";

const SIZE = 100;

We're importing the core functionalities from Reanimated that we'll need for our animation. The SIZE constant will define our shape's dimensions.

Understanding Shared Values

At the heart of Reanimated animations are shared values. These are special variables that can be animated smoothly:

const progress = useSharedValue(1);
const scale = useSharedValue(2);

Here, we create two shared values:

• progress: Starting at 1 (fully visible)

• scale: Starting at 2 (double size)

Creating the Animation Style

The useAnimatedStyle hook is where we define how our shared values affect the visual properties:

const reanimatedStyle = useAnimatedStyle(() => {
  return {
    opacity: progress.value,
    borderRadius: (progress.value * SIZE) / 2,
    transform: [
      { scale: scale.value },
      { rotate: handleRotation(progress) },
    ],
  };
});

This style configuration:

• Links the opacity directly to our progress value

• Creates a dynamic border radius that changes with progress

• Applies scaling and rotation transforms

The Rotation Worklet

const handleRotation = (progress: SharedValue<number>) => {
  "worklet";
  return `${progress.value * Math.PI}rad`;
};

This worklet converts our progress value into a rotation value in radians. The "worklet" directive ensures this calculation happens on the UI thread for smooth performance.

Triggering the Animation

useEffect(() => {
  progress.value = withRepeat(withSpring(0.5, { duration: 5000 }), 1, true);
  scale.value = withRepeat(withSpring(1, { duration: 5000 }), 1, true);
}, []);

When our component mounts, we start two spring animations:

1. Progress animates from 1 to 0.5

2. Scale animates from 2 to 1

Both animations use withRepeat to create a back-and-forth effect that runs once.

Rendering the Animated Component

<View style={styles.container}>
  <Animated.View
    style={[
      { height: SIZE, width: SIZE, backgroundColor: "blue" },
      reanimatedStyle,
    ]}
  />
</View>

The final result is a blue square that smoothly:

• Fades to 50% opacity

• Scales down to its original size

• Rotates

• Transforms from a square to a more rounded shape

This example demonstrates the basic building blocks of Reanimated: shared values, animated styles, and spring animations. In the next tutorial, we'll explore more advanced animation techniques and combinations!

---

Try running this code and watch how the different properties combine to create a smooth, engaging animation. Feel free to experiment with the values to see how they affect the animation's behavior!