patterntypescriptreact-nativeModerate

React Native Reanimated 3: Running Animations on the UI Thread

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

react-native-reanimated v3

reanimatedworkletUI threadshared valueanimated style60fpsgesture

Error Messages

[Reanimated] Tried to synchronously call a non-worklet function on the UI thread

Problem

Animations driven from the JS thread drop frames when the JS thread is busy. React Native's built-in Animated API with useNativeDriver only supports a subset of properties.

Solution

Use react-native-reanimated v3. Define useAnimatedStyle and useSharedValue for values that animate. Mark callback functions with the 'worklet' directive to run them on the UI thread synchronously.

Why

Reanimated runs animation logic in a separate worklet runtime on the UI thread, completely bypassing the JS thread. This means 60/120fps animations even when the JS thread is saturated.

Gotchas

Functions called from worklets must also be worklets or pure — no async, no closures over non-shareable values
useSharedValue is not a React state — changes do not trigger re-renders
Do not mix Animated.Value and Reanimated shared values in the same component
On the New Architecture, Reanimated v3 uses the JSI directly without a bridge

Code Snippets

Basic Reanimated 3 spring animation

import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

export function AnimatedBox() {
  const offset = useSharedValue(0);

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

  return (
    <>
      <Animated.View style={[styles.box, animatedStyle]} />
      <Button
        title="Move"
        onPress={() => {
          offset.value = withSpring(offset.value + 50);
        }}
      />
    </>
  );
}

Revisions (0)

No revisions yet.