Animated API
ELI5 — The Vibe Check
React Native's Animated API lets you create smooth animations that can run on the native thread. It's the built-in way to make things slide, fade, and bounce — though most people graduate to Reanimated once things get complex.
Real Talk
React Native's built-in animation library that provides a declarative API for creating performant animations. The Animated API supports timing, spring, and decay animations, can compose sequences and parallels, and can use the native driver to run animations on the UI thread without crossing the bridge.
Show Me The Code
import { Animated } from 'react-native';
const fadeAnim = useRef(new Animated.Value(0)).current;
Animated.timing(fadeAnim, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
When You'll Hear This
"Always set useNativeDriver: true or your animations will stutter on low-end devices." / "The Animated API is fine for simple transitions, but use Reanimated for anything gesture-driven."
Related Terms
CSS Transitions
CSS transitions are the smooth operators of web design.
Gesture Handler
Gesture Handler replaces React Native's janky touch system with one that runs on the native thread.
React Native
React Native lets you build iPhone and Android apps using React and JavaScript. It's like React put on a disguise and snuck into the App Store.
Reanimated
Reanimated is React Native's animation library on steroids.