How do you build animations in React Native?

There are three common approaches. Animated is built in and works for many cases. Reanimated runs worklets on the UI thread and is the best fit for gesture-driven and interruptible animation. LayoutAnimation animates layout changes such as insertion or removal with very little code.

import { useEffect, useRef } from "react";
import { Animated, Pressable } from "react-native";

export function FadeIn({ children }: { children: React.ReactNode }) {
  const opacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 250,
      useNativeDriver: true,
    }).start();
  }, [opacity]);

  return <Animated.View style={{ opacity }}>{children}</Animated.View>;
}

Choosing the right tool

• Animated with useNativeDriver for opacity and transforms
• Animated without native driver only for properties it cannot drive, such as width or backgroundColor
• LayoutAnimation for simple layout changes on the next render
• Reanimated for gesture-driven, interruptible or complex spring animations
• The built-in Animated API is enough for simple fades, slides and sequences

The native driver cannot animate layout properties, because layout is computed by Yoga. Animating width or top forces work on the JS thread and is more likely to drop frames. Prefer transform and opacity, and use scale instead of width where the visual result is equivalent.