Why is the built-in Animated API slow, and why is React Native Reanimated the industry standard?

Short answer

The built-in Animated API often runs through the slow JavaScript thread, and its useNativeDriver is limited to opacity and transforms, while Reanimated runs animation code on the UI thread using Worklets at 60–120 fps.

Explanation

With traditional Animated without useNativeDriver, each frame is calculated on the JS thread and sent through the Bridge, causing stutter or freezing if the app performs any logic. Reanimated uses Worklets to compile small JavaScript functions and run them directly on the UI thread, fully separate from the JS thread.

Code example

// Ultra-smooth Reanimated example running on the UI Thread:
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

function Box() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  return <Animated.View style={[styles.box, animatedStyles]} />;
}

Common mistakes

• Believing that the built-in useNativeDriver supports animating width, height, or colors; it supports only transform and opacity.

Follow-up questions

• How do you combine React Native Gesture Handler (RNGH) with Reanimated for immediate touch gesture interactions?
• What are Shared Values in Reanimated, and how do they differ from useState?

Sources

• React Native docs — Animated
• Reanimated docs — Getting started