How does react native reanimated useSharedValue work?

In React Native Reanimated, `useSharedValue` is a hook that allows you to create a mutable shared value that can be used to drive animations and perform other animated interactions. This shared value can be accessed and modified from multiple components and screens, enabling synchronized animations and state across your application.

Here’s how `useSharedValue` works:

1. Installation: First, you need to install the React Native Reanimated library in your project. You can do this by running the following command:

npm install react-native-reanimated

2. Importing: After installation, you need to import the `useSharedValue` hook from the library in the component where you want to use it. Here’s an example:

import { useSharedValue } from 'react-native-reanimated';

3. Creating a shared value: To create a shared value, you can call the `useSharedValue` hook and pass an initial value as its argument. This hook will return a mutable value that can be accessed and updated from anywhere within your app. Here’s an example:

const sharedValue = useSharedValue(0);

4. Accessing and updating the shared value: Once you have created the shared value, you can access and update it using the `value` property. Here’s an example of accessing the shared value and updating it inside a component:

import { useSharedValue, withTiming } from 'react-native-reanimated';

const MyComponent = () => {
  const sharedValue = useSharedValue(0);

  const startAnimation = () => {
    sharedValue.value = withTiming(1, { duration: 500 });
  };

  return (
    <TouchableOpacity onPress={startAnimation}>
      <Text>Start Animation</Text>
    </TouchableOpacity>
  );
};

In the above example, when the `startAnimation` function is called, the `sharedValue` is updated to `1` using the `withTiming` function from React Native Reanimated. This will trigger an animation that animates the value from its current state to `1` over a duration of 500 milliseconds.

5. Using the shared value in animations: The shared value can be used in various animations, such as translating an element, changing opacity, or scaling. You can use the shared value directly in the animated properties of React Native components or create derived values using helper functions like `useDerivedValue` and `useAnimatedStyle`. These functions allow you to define custom animations based on the shared value.

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

const MyComponent = () => {
  const sharedValue = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    const opacity = interpolate(sharedValue.value, [0, 1], [0, 1]);
    const translateY = interpolate(sharedValue.value, [0, 1], [0, 100]);

    return {
      opacity,
      transform: [{ translateY }],
    };
  });

  return (
    <Animated.View style={[styles.container, animatedStyle]} />
  );
};

In the above example, `useAnimatedStyle` is used to define an animated style based on the shared value. The `interpolate` function maps the shared value from the range `[0, 1]` to the range `[0, 1]` for the opacity and `[0, 100]` for the translateY. The resulting animated style is applied to the `Animated.View` component, allowing it to animate based on the shared value.

Under the hood, useSharedValue uses a reactive and declarative architecture known as the Reanimated Worklet Architecture. Here's a high-level overview of how it works:

1. Worklet: A worklet is a JavaScript function that runs on the native side. It allows you to perform high-performance computations and animations directly on the native thread, rather than the JavaScript thread. Worklets are executed by a separate runtime environment called the “Reanimated Worklet Runtime.”
2. Native Driver: React Native Reanimated uses the “Native Driver” to execute animations and operations on the native side, leveraging the performance benefits of the native environment.
3. Shared Value: When you create a shared value using useSharedValue, it allocates a memory block on the native side and stores the value there. This memory block is shared among all the components that use the same shared value.
4. Dependencies Tracking: React Native Reanimated automatically tracks the dependencies of shared values. It keeps track of which components read or write to a particular shared value. This allows it to optimize the execution and minimize unnecessary re-evaluations.
5. Batched Updates: React Native Reanimated batches the updates to shared values and performs them in a single worklet call. This batching ensures that multiple updates to shared values in a single frame are optimized for performance.
6. Synchronization: React Native Reanimated ensures that shared values are synchronized across all the components using them. When a shared value is updated, it triggers a re-render of the components that depend on it, and the updated value is propagated to the native side for animation or other operations.
7. Animation Operations: React Native Reanimated provides various animation functions (e.g., withTiming, withSpring, etc.) that can be used to animate shared values. These functions define the animation behavior and execute the animation on the native side using the Reanimated Worklet Runtime.

By leveraging the Reanimated Worklet Architecture, useSharedValue in React Native Reanimated provides a performant and synchronized way to manage mutable values across components and drive animations with the help of native optimizations.