26. Animations with Animated

The `Animated` API drives values over time and can run on the native thread via `useNativeDriver: true`, keeping animations smooth even if the JS thread is busy.

import { Animated, useRef, useEffect } from "react";

function FadeIn({ children }: { children: React.ReactNode }) {
  const opacity = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }).start();
  }, [opacity]);
  return <Animated.View style={{ opacity }}>{children}</Animated.View>;
}

Not every style property supports the native driver (layout properties like `width` typically don't), so check the docs before assuming an animation can be offloaded.

Read in another language

How to study this topic

Scoring

Check your understanding

Badges