This content originally appeared on DEV Community and was authored by Ola Abaza
In React Native, the Animated API is used because it gives you a performant and flexible way to create animations in your app.
🔑 Reasons to Use the Animated API
Performance
If you animate with setState, every frame causes a full React render, which is slow.The Animated API runs animations on the native UI thread (especially with useNativeDriver: true), so animations stay smooth (60fps)(frames per second) even if JavaScript is busy.Declarative Animations
You describe what should happen (e.g., "move this box from X=0 to X=200 over 500ms"), and React Native handles the how. Makes animations easier to reason about.Reusability
The same Animated.Value can drive multiple properties (opacity, scale, rotation, etc.). Easier than manually tracking multiple states.Gestures + Physics
Supports spring animations, decay (momentum), and interactions with touch gestures. Perfect for natural-feeling UI like swipes, drags, and bounces.Cross-Platform Consistency
Works on both iOS and Android with the same API, without you needing to use native code for animations.Interpolation
You can map one animated value into different ranges. Example:
const progress = useRef(new Animated.Value(0)).current;
// Slide horizontally
const translateX = progress.interpolate({
inputRange: [0, 1],
outputRange: [0, 200],
});
// Fade out
const opacity = progress.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [1, 0.5, 0], // custom curve
});
// Rotate
const rotate = progress.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
All are derived from the same progress value.
→ This allows chaining multiple visual effects from one value.
🔹 Step by step (useRef(new Animated.Value(0)).current;)
1- new Animated.Value(0)
Creates an Animated.Value object starting at 0.
This is the special type React Native uses to drive animations (instead of a normal number).
2- useRef(...)
Ensures the value is persistent across re-renders.
Without useRef, every re-render would create a new Animated.Value, resetting the animation back to 0.
With useRef, React will keep the same object during the component’s lifecycle.
3- .current
useRef returns an object like { current: }.
.current gives you the actual Animated.Value stored inside.
Example
import React, { useRef, useEffect } from "react";
import { Animated, View } from "react-native";
export default function Box() {
const fadeAnim = useRef(new Animated.Value(0)).current; // start opacity at 0
useEffect(() => {
Animated.timing(fadeAnim, {
toValue: 1,
duration: 2000,
useNativeDriver: true, // run on UI thread
}).start();
}, []);
return (
<Animated.View
style={{
opacity: fadeAnim,
width: 100,
height: 100,
backgroundColor: "blue",
}}
/>
);
}
👉 Without Animated, you'd have to manually update opacity on every frame — very inefficient.
✅ In short:
We need the Animated API in React Native because it makes animations smooth, efficient, declarative, and easy to combine with gestures and physics.
🔹 What happens with setState?
- When you call setState, React re-renders in the JS thread.
- That means every frame of the animation depends on the JS thread being free and fast.
- If the JS thread is busy (fetching API, parsing JSON, rendering a heavy component), the animation drops frames → stutters.
- That’s why animations with setState often run at 30fps or less, instead of smooth 60fps.
⚖️ Quick Comparison between Animated(built-in) and react-native-reanimated
- Performance --> Good, but JS can block --> Excellent (runs on UI thread)
- Complexity handling --> Basic animations only --> Handles very complex flows
- Gesture support --> Limited --> designed to work seamlessly with react-native-gesture-handler.
- Ease of use --> Simple API --> Steeper learning curve
- Dependencies --> Built-in (no install) --> Requires installation & setup
- Recommended for production --> Small/simple apps --> Medium/large apps with rich UI
This content originally appeared on DEV Community and was authored by Ola Abaza
Ola Abaza | Sciencx (2025-08-18T20:09:55+00:00) 1 RN Thing a Day – Day 9: Animated API. Retrieved from https://www.scien.cx/2025/08/18/1-rn-thing-a-day-day-9-animated-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.