Shared Values

Shared Values

Shared Values and useAnimatedStyle

useSharedValue(initial) creates a value that both runtimes can see, read and written through .value. useAnimatedStyle(worklet) returns a style whose function runs on the UI thread, first once and then again whenever a shared value it reads changes. Assigning an animation, such as withSpring(target), to .value starts it on the UI thread:

src/rea/SharedBox.tsx: a shared value, an animated style and a spring (excerpt)TSX

  const x = useSharedValue(0);                    // lives on both threads
  const style = useAnimatedStyle(() => ({         // re-runs on the UI thread when x changes
    transform: [{ translateX: x.value }],
    opacity: 0.4 + x.value / 400,
  }));
  const toggle = () => {
    resetClock();
    const target = x.value === 0 ? 240 : 0;
    x.value = withSpring(target, undefined, (finished) => {
      scheduleOnRN(log, 'spring to', target, 'finished:', finished);
    });
    log('JS read right after starting:', x.value);
  };

Two presses of Move:

Output of 100

 LOG  +39ms JS read right after starting: 0
 LOG  +1323ms spring to 240 finished: true
 LOG  +13ms JS read right after starting: 240
 LOG  +1118ms spring to 0 finished: true

Reading x.value straight after starting the spring returns the old value: the animation runs on the other thread. The completion callback is a worklet too, and scheduleOnRN() sends the call to log back to the JavaScript thread. Animated.View and friends come from react-native-reanimated 11,010 .

MENU