What is the Animated API in React Native?

The Animated API is React Native's built-in animation library that drives smooth, high-performance animations by running on the native UI thread (with useNativeDriver: true). Core concepts: (1) Animated.Value: a single animated number: const opacity = useRef(new Animated.Value(0)).current;; (2) Animated functions: create animations that update the value: // Timing (tween to a value): Animated.timing(opacity, { toValue: 1, duration: 300, easing: Easing.ease, useNativeDriver: true, }).start(); // Spring (bouncy physics): Animated.spring(scale, { toValue: 1.2, friction: 7, tension: 40, useNativeDriver: true, }).start(); // Decay (decelerate from velocity): Animated.decay(velocity, { deceleration: 0.997, useNativeDriver: true, }).start();; (3) Animated.View (and Text, Image, ScrollView): use Animated.* components to receive animated values: // Fade in animation: const opacity = useRef(new Animated.Value(0)).current; useEffect(() => { Animated.timing(opacity, { toValue: 1, duration: 500, useNativeDriver: true }).start(); }, []); return <Animated.View style={{ opacity }}><Text>Hello!</Text></Animated.View>;. useNativeDriver: true: runs animation on the native UI thread — no JS bridge involvement per frame = 60fps even when JS is busy. Only works for non-layout properties: opacity, transform (translateX, translateY, scale, rotate). Not for width, height, backgroundColor. Sequences and parallel: Animated.sequence([anim1, anim2]).start(); Animated.parallel([anim1, anim2]).start(); Animated.stagger(100, [anim1, anim2, anim3]).start();