Shared values and useAnimatedStyle in Reanimated

WHAT THIS TESTS Whether you know Reanimated's primitives and the rule that animated styles are derived by worklets, not by React state.

A GOOD ANSWER COVERS useSharedValue returns an object with a single mutable .value property; that object is shared by reference between the JS thread and the UI thread runtime, so changes propagate without crossing the bridge. You then call useAnimatedStyle, passing a worklet that reads the shared value and returns a plain style object such as transform or opacity. The returned style is attached to an Animated.View. To trigger motion you mutate the .value, ideally wrapping the target in an animation helper like withTiming or withSpring, which produces a smooth transition on the UI thread. You should stress that you never read .value during render to feed setState, because that defeats the off-thread design and can cause stale reads.

COMMON WRONG ANSWERS Reassigning the whole shared value object instead of its .value. Reading .value in render to compute styles synchronously. Passing a normal style object that recomputes on every React render rather than a useAnimatedStyle worklet. Forgetting the wrapper Animated.View and using a plain View, which will not subscribe to the animated style.

LIKELY FOLLOW-UPS How do withTiming and withSpring differ, how do you run JS code when an animation finishes using runOnJS, how does useDerivedValue help, and what happens if you mutate .value from the JS thread versus a worklet.

ONE CONCRETE EXAMPLE const offset = useSharedValue(0); const style = useAnimatedStyle returning transform translateX of offset.value. A button onPress sets offset.value to withSpring(100). The Animated.View using style glides 100 pixels to the right with spring physics, computed entirely on the UI thread so it stays smooth under JS load.