Animated: Drive Styles with Values, Not Setters

WHY IT EXISTS: To provide a performant, declarative way to create fluid animations in React Native. It was designed to avoid the cost of re-rendering components on every frame, decoupling animation logic from the React render cycle for better performance.

THE MENTAL MODEL: Instead of telling a component "be at opacity 0.1, now 0.2, now 0.3...", you create an Animated.Value. You then tell your component's style "your opacity is always whatever this value is." Then, you just command the value to animate from 0 to 1 over 500ms. The library handles the frame-by-frame updates, changing the view's properties directly without involving React's render process.

HOW IT WORKS: You start by creating an Animated.Value or Animated.ValueXY, usually stored in a useRef to persist across renders. You then apply this value to a style property of a special animatable component, like Animated.View or Animated.Text. To start an animation, you use a function like Animated.timing() or Animated.spring(), passing it the Animated.Value and a configuration object (e.g., toValue, duration). Calling .start() on this kicks off the animation. Only components wrapped with createAnimatedComponent (like the built-in Animated.View) can be animated this way.

WHEN TO USE IT: Use it for any UI animation that can be tied to a style property or prop. It is ideal for fades, translations, rotations, and scaling. It's also great for creating complex, choreographed animations by composing parallel (run at same time), sequence (run one after another), and stagger (parallel with delays) animations.

WHEN NOT TO USE IT: For very complex gesture-based animations that need to react instantly to high-frequency user input, the newer Reanimated library is often preferred as it is designed specifically for that purpose. For simple, one-off transitions on mount or unmount, the even simpler LayoutAnimation API might suffice without the boilerplate of setting up Animated.Values.

ONE CANONICAL EXAMPLE: A common use case is a fade-in effect. You initialize an Animated.Value called fadeAnim to 0 inside a useRef. You wrap your content in an Animated.View and set its style to { opacity: fadeAnim }. Then, inside a useEffect hook, you call Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true }).start(). This declaratively animates the opacity from 0 to 1 over 500 milliseconds on the native thread when the component mounts, ensuring a smooth effect that won't be blocked by JS work.