What is react-native-reanimated Shared Values and Worklets?

React Native Reanimated v2/v3 introduces two fundamental concepts that enable true UI-thread animations: Shared Values: a reactive value that can be shared between the JavaScript thread and the UI thread. Mutations to shared values automatically update animations on the UI thread without going through the bridge. import { useSharedValue, withTiming, withSpring } from "react-native-reanimated"; function Component() { const opacity = useSharedValue(1); // Initial value const scale = useSharedValue(1); function handlePress() { // These run on UI thread -- 60fps guaranteed: opacity.value = withTiming(0, { duration: 300 }); scale.value = withSpring(0.8); } }. Worklets: JavaScript functions that can be "transferred" to and executed on the UI thread. Marked with the "worklet" directive. All of Reanimated's animation functions (withTiming, withSpring, etc.) are worklets: // This function runs on the UI thread: function myAnimation() { "worklet"; return withSpring(1, { damping: 10 }); } // useAnimatedStyle runs on UI thread: const animatedStyle = useAnimatedStyle(() => { "worklet"; // Implicit in useAnimatedStyle return { opacity: opacity.value, // Reads shared value on UI thread transform: [{ scale: scale.value }], }; });. Why this matters: without Reanimated, a gesture event → JS thread → calculate animation → bridge → native UI update. With Reanimated: gesture event → UI thread worklet → update shared value → UI thread animation — entirely on the UI thread at 60fps even if JS is blocked. Animated.View: use Reanimated's Animated.View: import Animated from "react-native-reanimated"; <Animated.View style={animatedStyle} />.