What is the difference between react-native-reanimated and the Animated API?

Both animate UI in React Native but with very different approaches and performance characteristics: Built-in Animated API: animations defined in JavaScript, values communicated to native via the bridge (or JSI); useNativeDriver: true moves animation execution to the native thread for supported properties; limitations: only opacity and transform work with useNativeDriver; interpolations, calculations happen in JS; complex gesture-driven animations cause frame drops since gesture events cross the bridge; useNativeDriver: false runs EVERYTHING in JS — very slow for complex animations. react-native-reanimated (v2/v3): animations are defined using "worklets" — special JS functions that run on the UI thread (native side). The entire animation logic runs natively — zero bridge communication during animation. Enables truly native 60fps+ animations for ANY property including layout (width, height, backgroundColor): import Animated, { useSharedValue, useAnimatedStyle, withTiming, withSpring } from "react-native-reanimated"; function AnimatedBox() { const width = useSharedValue(100); const animatedStyle = useAnimatedStyle(() => ({ width: width.value, backgroundColor: width.value > 150 ? "red" : "blue", })); return ( <Animated.View style={[styles.box, animatedStyle]} /> ); }. react-native-gesture-handler + reanimated: gestures processed natively, animations respond natively — perfect for swipeable cards, bottom sheets, interactive animations. Used by react-native-bottom-sheet, Swipeable components, etc. Summary: use reanimated for any production animation, especially gesture-driven. Use built-in Animated only for simple, static animations where simplicity matters more.