How does Reanimated run animations on the UI thread?

A worklet is a JavaScript function that Reanimated can execute on the UI runtime. Shared values are references that both threads can read and write. useAnimatedStyle creates a style that is recalculated on the UI thread whenever a shared value it depends on changes.

import { Pressable } from "react-native";
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";

export function Expandable({ children }: { children: React.ReactNode }) {
  const open = useSharedValue(0);
  const style = useAnimatedStyle(() => ({
    opacity: open.value,
    transform: [{ scaleY: 0.9 + open.value * 0.1 }],
  }));

  return (
    <>
      <Pressable onPress={() => { open.value = withTiming(open.value === 1 ? 0 : 1, { duration: 200 }); }}>
        <Animated.Text>Toggle</Animated.Text>
      </Pressable>
      <Animated.View style={style}>{children}</Animated.View>
    </>
  );
}

What to watch for

• Worklets capture values at creation time; use shared values for changing data
• Do not call JS-only APIs such as fetch or setState inside a worklet
• useAnimatedStyle must read shared values to be reactive
• runOnJS is required to call JavaScript from the UI runtime
• Layout animations can conflict with manual transforms; test the combination

Reanimated is not automatically faster for every animation. The gain comes from avoiding cross-thread work per frame. If an animation depends on data that must be fetched or computed on the JS thread, the bottleneck remains. Keep the animated state minimal and derive it on the UI side.