Animations

An Animated.Value is a mutable, animatable number that lives outside React’s own re-render cycle — reading or writing it does not trigger a re-render, which is what lets it be updated many times per second without the cost of a setState call per frame:

The useRef(new Animated.Value(0)).current pattern above exists only to survive re-renders — useRef is React’s own escape hatch for a mutable value a re-render must not reset. The newer useAnimatedValue Hook wraps that same pattern directly:

Three animator functions drive an Animated.Value from its current value toward a target, each with its own config shape and its own feel:

Easing supplies the curve Animated.timing’s `easing option follows — how the animated value’s rate of change varies over the fixed duration, rather than the duration itself:

interpolate maps one `Animated.Value’s input range onto a different output range, which is how a single driving value (a scroll position, a gesture’s progress, a plain 0-to-1 timing value) ends up controlling several visually different properties at once:

Both translateY and opacity above are derived from the same underlying scrollY value — exactly the shape the collapsing header example below uses to drive a header’s height and fade from one scroll-position value.

Animated’s composition helpers combine several animations (each one an `Animated.timing/spring/decay call, not yet started) into a single coordinated animation:

Animated.event wires a native event’s numeric field directly into an Animated.Value, without a JS-thread round trip for every single event — the event’s value is written straight into the Animated.Value on the native side when useNativeDriver: true is set:

The nested shape ([{ nativeEvent: { contentOffset: { y: scrollY } } }]) mirrors the native scroll event’s own shape exactly — Animated.event walks that path on every event and assigns whatever numeric value it finds at nativeEvent.contentOffset.y into scrollY, entirely without invoking the JS callback that a plain onScroll={(event) ⇒ setScrollY(event.nativeEvent.contentOffset.y)} would otherwise require once per event.

Setting useNativeDriver: true serializes the animation’s description (its toValue, duration, easing curve, and so on) exactly once and hands that description to the native side, which then runs every subsequent frame entirely off the JS thread — no per-frame message back to JavaScript at all. Historically this only worked for non-layout properties — opacity and transform — because those two are applied directly to an already-laid-out native view, while a layout-affecting property (width, height, top) requires re-running Flexbox and therefore, on the old architecture, had to fall back to the JS thread. React Native 0.85 introduced a shared native animation backend that also lets useNativeDriver animate certain layout properties natively on the New Architecture, narrowing that historic gap — the collapsing header example below still shows the interpolate-driven layout change explicitly, since not every layout property is covered yet and understanding the underlying mechanism matters regardless of which properties a given release covers natively.

LayoutAnimation takes a different approach entirely: instead of describing what to animate, it tells React Native to animate whatever the next layout change turns out to be, automatically, without a hand-written Animated.timing for each affected property:

This is the right tool for a list item’s size changing (a PlaceCard’s notes preview expanding) without writing an explicit `Animated.timing for every property the size change touches — at the cost of far less control than driving the same change through Animated or Reanimated directly. The UIManager.setLayoutAnimationEnabledExperimentalAndroid(true) opt-in was historically required on Android; it is no longer needed on the New Architecture, where LayoutAnimation works out of the box on both platforms.

Reanimated (also from Software Mansion, the same team behind React Native Gesture Handler) replaces Animated.Value with a shared value and replaces Animated.timing/Animated.spring with animators that run entirely on the UI thread:

react-native-animatable is a lighter-weight, pre-built animation-preset library: wrap a component in Animatable.View and name a preset:

It is the right choice for a quick, simple entrance/exit effect with no Animated/Reanimated code to write at all, at the cost of far less control than either — there is no equivalent of a shared value, a worklet, or an interpolate mapping, only a named preset and a duration.

Lottie (lottie-react-native) plays a designer-authored After Effects animation exported as JSON (.lottie/.json) through a LottieView component. It is not something engineering hand-animates at all — it is for the polished loading/success/empty-state animation a designer hands off directly as a file, rendered pixel-for-pixel as designed rather than approximated with Animated/Reanimated primitives.

PlaceCard (established on styling.adoc and given press feedback on Touches and Gestures) fades in on mount by wrapping its existing content in an Animated.View driven by an Animated.Value:

useNativeDriver: true is safe here because opacity is exactly the non-layout property that has always run natively — the fade plays smoothly regardless of what the JS thread is doing while PlacesListScreen mounts a whole screen of cards at once.

PlacesListScreen (its FlatList covered in full on Lists and Scrolling) collapses its header as the list scrolls, driven by the same Animated.event/interpolate pairing introduced above:

headerHeight interpolates a layout property (height), so this call sets useNativeDriver: false — unless running on React Native 0.85+'s shared native animation backend on the New Architecture, in which case this particular layout property can run natively too; headerTitleOpacity alone could always be driven natively, since opacity never depended on the layout-property restriction to begin with.

The same effect as (a), for direct before/after comparison, using a shared value and a worklet instead of an Animated.Value and an imperative .start() call:

useAnimatedStyle’s callback is a worklet: it runs on the UI thread every time `opacity.value changes, which withTiming itself updates frame-by-frame also on the UI thread — unlike (a), there is no useNativeDriver flag to set at all, because every part of this version already runs off the JS thread by construction. Animated.View here is Reanimated’s own export, not React Native’s — the two are not interchangeable, since only Reanimated’s Animated.View knows how to apply a useAnimatedStyle result on the UI thread.

While usePlaces() (TanStack Query, covered in full on Networking and Data Fetching) is loading, PlacesListScreen renders a Lottie animation in place of the list:

loading-places.json is a designer-exported Lottie file bundled directly into the app under assets/animations/ — nothing about autoPlay/loop involves Animated, Reanimated, or a shared value; LottieView drives its own playback internally once given the file.