### Reanimated Installation Steps Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/contributing.mdx

A simple list demonstrating the basic steps required to install the Reanimated package.

```bash
The Reanimated installation steps:

- Add Reanimated package form npm
- Add babel plugin to babel.config.js
- Reset cache
```

--------------------------------

### Local Docusaurus Server Setup

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/contributing.mdx

Steps to clone the Reanimated repository, install dependencies, and start the local Docusaurus server for documentation development.

```bash
cd react-native-reanimated
yarn
cd docs/docs-reanimated
yarn && yarn start
```

--------------------------------

### Install Pods for Reanimated v3 Examples

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/RELEASE.md

For Reanimated v3 releases, install pods in all example apps to update their Podfile.lock files. This command needs to be run in each example directory.

```bash
bundle install && bundle exec pod install
```

--------------------------------

### Build and Run Example Apps

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/web-support.mdx

Commands to build and run the example applications from the Reanimated repository.

```shell
yarn && yarn build
```

```shell
yarn start
```

--------------------------------

### Jest Configuration Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/testing-with-jest.mdx

Ensure your `jest.config.js` file includes the `setupFilesAfterEnv` property pointing to your setup file. For Jest versions older than 28, use `setupFiles` instead.

```javascript
...
preset: 'react-native',
setupFilesAfterEnv: ['./jest-setup.js'],
...
```

--------------------------------

### Start Metro Bundler

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/macos-example/README.md

Start the Metro bundler from the MacOSExample directory to serve the application.

```bash
cd ..
yarn start
```

--------------------------------

### Basic Shared Element Transition Setup

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/shared-element-transitions/overview.mdx

This example demonstrates the basic setup for shared element transitions using `sharedTransitionTag` on two animated views within a navigation stack. Ensure you have `react-native-reanimated` and `react-navigation` installed and configured.

```javascript
import Animated from 'react-native-reanimated';

const Stack = createNativeStackNavigator();

function One({ navigation }) {
  return (
    <>
      <Animated.View
        // highlight-start
        sharedTransitionTag="sharedTag"
        // highlight-end
      />
      <Button title="Two" onPress={() => navigation.navigate('Two')} />
    </>
  );
}

function Two({ navigation }) {
  return (
    <> <Animated.View
        // highlight-start
        sharedTransitionTag="sharedTag"
        // highlight-end
      />
      <Button title="One" onPress={() => navigation.navigate('One')} />
    </>
  );
}

export default function SharedElementExample() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="One" component={One} />
        <Stack.Screen name="Two" component={Two} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

--------------------------------

### Start NextExample in Development Mode

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/next-example/README.md

Use this command to start the NextExample app in development mode for active coding and debugging.

```bash
yarn dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/web-example/README.md

Run this command in your project's root directory to install all necessary dependencies.

```bash
npm install
```

--------------------------------

### Install Project Root Node Modules

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/macos-example/README.md

Install all necessary Node.js dependencies in the project root directory.

```bash
yarn
```

--------------------------------

### Install iOS Pods

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/fundamentals/getting-started.mdx

Run this command in the ios directory to install necessary pods when developing for iOS.

```bash
cd ios && pod install && cd ..
```

--------------------------------

### Install MacOSExample Node Modules

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/macos-example/README.md

Navigate to the MacOSExample directory and install its specific Node.js dependencies.

```bash
cd MacOSExample
yarn
```

--------------------------------

### Start Web Development Server

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/RELEASE.md

Run the Expo development server for web builds. This command starts the Metro bundler with web support enabled.

```bash
npx expo start --web
```

--------------------------------

### Create and Run Production Build for NextExample

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/next-example/README.md

Commands to create a production-ready build of the NextExample app and then start it.

```bash
yarn build
yarn start
```

--------------------------------

### DynamicColorIOS Example Usage

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/utilities/DynamicColorIOS.mdx

A complete example demonstrating the usage of DynamicColorIOS, showcasing how to define adaptive colors for different modes.

```tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';
import { DynamicColorIOS } from 'react-native-reanimated';

const lightColor = '#FF0000'; // Red in light mode
const darkColor = '#0000FF'; // Blue in dark mode
const highContrastLightColor = '#00FF00'; // Green for high contrast light
const highContrastDarkColor = '#FFFF00'; // Yellow for high contrast dark

export default function DynamicColorIOSExample() {
  const progress = useSharedValue(0);

  const animatedStyle = useAnimatedStyle(() => {
    // Example: You could animate the color based on progress, but here we just use static values
    // const backgroundColor = DynamicColorIOS({
    //   light: interpolateColor(progress.value, [0, 1], [hexToRgb(lightColor), hexToRgb(highContrastLightColor)]),
    //   dark: interpolateColor(progress.value, [0, 1], [hexToRgb(darkColor), hexToRgb(highContrastDarkColor)]),
    // });

    const backgroundColor = DynamicColorIOS({
      light: lightColor,
      dark: darkColor,
      highContrastLight: highContrastLightColor,
      highContrastDark: highContrastDarkColor,
    });

    return {
      backgroundColor,
      width: 100,
      height: 100,
      borderRadius: 10,
    };
  });

  return <Animated.View style={animatedStyle} />;
}

```

--------------------------------

### Interactive Example of Animating Styles

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useAnimatedStyle.mdx

An interactive example showcasing how to animate styles using useAnimatedStyle. This example typically involves shared values to control style properties dynamically.

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
    borderRadius: 20,
  },
});

const AnimatingStyles = () => {
  const opacity = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
    };
  });

  React.useEffect(() => {
    opacity.value = withTiming(0.5, {
      duration: 500,
      easing: Easing.out(Easing.ease),
    });
  }, []);

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

export default AnimatingStyles;
```

--------------------------------

### Interactive Timing Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withTiming.mdx

This interactive example allows you to experiment with the basic usage of withTiming. It requires importing the TimingBasic component and its source.

```javascript
import TimingBasic from '@site/src/examples/TimingBasic';
import TimingBasicSrc from '!!raw-loader!@site/src/examples/TimingBasic';

<InteractiveExample src={TimingBasicSrc} component={TimingBasic}/>
```

--------------------------------

### Start the Expo Development Server

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/web-example/README.md

Executes the Expo CLI to start the development server, allowing you to run the app on emulators, simulators, or physical devices.

```bash
npx expo start
```

--------------------------------

### Embed Interactive Example with Video

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/contributing.mdx

Use the InteractiveExample component to embed examples with video previews. The 'src' prop takes the raw source of the component, and 'component' prop renders the actual component.

```javascript
import AnimatedKeyboardSrc from '!!raw-loader!@site/src/examples/AnimatedKeyboard';

<InteractiveExample
  src={AnimatedKeyboardSrc}
  component={
    <ThemedVideo
      center
      width={300}
      sources={{
        light: '/recordings/useAnimatedKeyboard_light.mov',
        dark: '/recordings/useAnimatedKeyboard_dark.mov',
      }}
    />
  }
/>;
```

--------------------------------

### Transition Timing Function Steps Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-transitions/transition-timing-function.mdx

Demonstrates the use of TransitionTimingFunctionSteps component to apply CSS transition timing functions. This example requires importing the component and its source code.

```javascript
import TransitionTimingFunctionSteps from '@site/src/examples/css-transitions/TransitionTimingFunctionSteps';
import TransitionTimingFunctionStepsSrc from '!!raw-loader!@site/src/examples/css-transitions/TransitionTimingFunctionSteps';

<InteractiveExample src={TransitionTimingFunctionStepsSrc} component={TransitionTimingFunctionSteps}/>
```

--------------------------------

### Interactive Timing Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withTiming.mdx

Demonstrates the usage of withTiming for creating interactive animations. This example requires the TimingTabs component and its source code.

```javascript
import TimingTabs from '@site/src/examples/TimingTabs';
import TimingTabsSrc from '!!raw-loader!@site/src/examples/TimingTabs';

<InteractiveExample src={TimingTabsSrc} component={TimingTabs}/>
```

--------------------------------

### Interactive Example of transitionProperty

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-transitions/transition-property.mdx

This interactive example allows you to click rectangles to observe how `transitionProperty` animates their size changes. It showcases the practical application of animating multiple properties.

```javascript
import React from 'react';
import Animated, { useSharedValue, withTiming } from 'react-native-reanimated';
import { StyleSheet, View, Pressable } from 'react-native';

const TransitionProperty = () => {
  const width = useSharedValue(50);
  const height = useSharedValue(50);

  return (
    <View style={styles.container}>
      <Pressable
        onPress={() => {
          width.value = width.value === 50 ? 100 : 50;
          height.value = height.value === 50 ? 100 : 50;
        }}>
        <Animated.View
          style={{
            width,
            height,
            backgroundColor: 'blue',
            transitionProperty: ['width', 'height'],
            transitionDuration: 500,
          }}/>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TransitionProperty;
```

--------------------------------

### Jest Setup

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/testing-with-jest.mdx

Instructions for setting up Jest testing environment for Reanimated, including adding necessary configurations to `jest-setup.js` and `jest.config.js`.

```APIDOC
## Setup

Add the following line to your `jest-setup.js` file:

```javascript
require('react-native-reanimated').setUpTests();
```

- `setUpTests()` can take an optional config argument. The default config is `{ fps: 60 }`.

Ensure your `jest.config.js` file includes:

```javascript
...
preset: 'react-native',
setupFilesAfterEnv: ['./jest-setup.js'],
...
```

**Note:** If you are using Jest version older than 28, use `setupFiles` instead of `setupFilesAfterEnv`.
```

--------------------------------

### Install React Native Reanimated (NPM)

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/fundamentals/getting-started.mdx

Use this command to install the react-native-reanimated package when using npm.

```bash
npm install react-native-reanimated
```

--------------------------------

### Basic Linear Transition Setup

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/layout-animations/layout-transitions.mdx

This snippet shows the basic setup for using LinearTransition with an Animated.View component. Ensure you import LinearTransition from 'react-native-reanimated'.

```javascript
import { LinearTransition } from 'react-native-reanimated';

function App() {
  return <Animated.View layout={LinearTransition} />;
}
```

--------------------------------

### Basic Sequenced Transition Setup

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/layout-animations/layout-transitions.mdx

This snippet shows the basic setup for using SequencedTransition with an Animated.View component. Ensure you import SequencedTransition from 'react-native-reanimated'.

```javascript
import { SequencedTransition } from 'react-native-reanimated';

function App() {
  return <Animated.View layout={SequencedTransition} />;
}
```

--------------------------------

### Full AnimationName Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-animations/animation-name.mdx

This interactive example showcases the complete implementation of an animation using the animationName property, allowing for dynamic visualization.

```javascript
import React from 'react';
import { View } from 'react-native';
import Animated from 'react-native-reanimated';

const AnimationName = () => {
  return (
    <Animated.View
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'tomato',
        animationName: {
          '0%': {
            transform: [{ translateX: 0 }],
          },
          '50%': {
            transform: [{ translateX: 50 }],
          },
          '100%': {
            transform: [{ translateX: 0 }],
          },
        },
        animationDuration: '3s',
        animationIterationCount: 'infinite',
      }} />
  );
};

export default AnimationName;
```

--------------------------------

### Embed Interactive Example with Component

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/contributing.mdx

Embed interactive examples using the InteractiveExample component. Provide the raw source of the component via 'src' and the component itself via 'component'. An optional 'label' can be added for user guidance.

```javascript
import DecayTrain from '@site/src/examples/DecayTrain';
import DecayTrainSrc from '!!raw-loader!@site/src/examples/DecayTrain';

<InteractiveExample
  src={DecayTrainSrc}
  component={<DecayTrain />}
  label="Grab and drag the train"
/>;
```

--------------------------------

### Basic Animation Delay Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-animations/animation-delay.mdx

Demonstrates the basic usage of animationDelay with a numeric value in milliseconds.

```javascript
function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          '100%': {
            transform: [{ rotateZ: '180deg' }],
          },
        },
        animationDuration: '100ms',
        // highlight-next-line
        animationDelay: 500,
      }}
    />
  );
}
```

--------------------------------

### Setup GestureHandlerRootView

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/fundamentals/handling-gestures.mdx

Wrap your app with GestureHandlerRootView to ensure gestures work correctly. Keep it close to the root view.

```jsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* rest of the app */}
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Interactive Scroll Offset Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/scroll/useScrollOffset.mdx

This example demonstrates a practical application of the useScrollOffset hook, allowing for interactive animations tied to scroll events. It requires the ScrollOffset component and its source code.

```tsx
import ScrollOffset from '@site/src/examples/ScrollOffset';
import ScrollOffsetSrc from '!!raw-loader!@site/src/examples/ScrollOffset';

<InteractiveExample src={ScrollOffsetSrc} component={ScrollOffset} showCode/>
```

--------------------------------

### Interactive Decay Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withDecay.mdx

This example provides an interactive demonstration of the `withDecay` animation, allowing users to directly manipulate an element and observe its natural deceleration.

```javascript
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedGestureHandler, withDecay } from 'react-native-reanimated';
import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';

const DecayBasic = () => {
  const offset = useSharedValue(0);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.offsetX = offset.value;
    },
    onActive: (event, ctx) => {
      offset.value = ctx.offsetX + event.translationX;
    },
    onEnd: (event) => {
      offset.value = withDecay({
        velocity: event.velocityX,
        clamp: [-100, 100],
      });
    },
  });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={gestureHandler}>
        <Animated.View
          style={{
            width: 100,
            height: 100,
            backgroundColor: 'tomato',
            borderRadius: 10,
            transform: [{ translateX: offset.value }],
          }}
        />
      </PanGestureHandler>
    </GestureHandlerRootView>
  );
};

export default DecayBasic;

```

--------------------------------

### Stretch Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/layout-animations/entering-exiting-animations.mdx

Implement stretch animations for entering and exiting elements using StretchInX/Y and StretchOutX/Y. This example shows basic usage within an Animated.View component.

```jsx
import { StretchInX, StretchOutY } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={StretchInX} exiting={StretchOutY} />;
}
```

--------------------------------

### Interactive Animation Iteration Count Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-animations/animation-iteration-count.mdx

This interactive example allows you to see the `animationIterationCount` in action, specifically demonstrating a square wobbling 3 times. This is useful for visualizing the effect of a finite number of animation repetitions.

```javascript
import React from 'react';
import { StyleSheet } from 'react-native';
import Animated from 'react-native-reanimated';

const AnimationIterationCount = () => {
  return (
    <Animated.View
      style={[
        styles.square,
        {
          animationName: {
            from: {
              transform: [{ rotate: '0deg' }],
            },
            to: {
              transform: [{ rotate: '360deg' }],
            },
          },
          animationDuration: '1s',
          animationIterationCount: 3,
          animationDirection: 'alternate',
        },
      ]}/>
  );
};

const styles = StyleSheet.create({
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default AnimationIterationCount;
```

--------------------------------

### Basic CSS Animation Direction Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-animations/animation-direction.mdx

Demonstrates the use of 'alternate' for animationDirection in a Reanimated Animated.View component.

```javascript
function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          from: { width: 120 },
          to: { width: 240 },
        },
        animationDuration: '1s',
        animationIterationCount: 'infinite',
        // highlight-next-line
        animationDirection: 'alternate',
      }}
    />
  );
}
```

--------------------------------

### Roll Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/layout-animations/entering-exiting-animations.mdx

Shows how to use RollInRight and RollOutLeft for entering and exiting animations on an Animated.View component.

```jsx
import { RollInRight, RollOutLeft } from 'react-native-reanimated';

function App() {
  return <Animated.View entering={RollInRight} exiting={RollOutLeft} />;
}
```

--------------------------------

### Reset Project to Starter Code

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/web-example/README.md

This command moves the current starter code to the 'app-example' directory and creates a new, blank 'app' directory for development.

```bash
npm run reset-project
```

--------------------------------

### Example of a Worklet in useAnimatedStyle

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-worklets/docs/fundamentals/glossary.mdx

This snippet demonstrates a worklet used within `useAnimatedStyle`. It's automatically workletized and runs on the UI thread.

```javascript
const style = useAnimatedStyle(() => {
  console.log('Running on the UI Runtime (UI thread)');
  return { opacity: 0.5 };
});
```

--------------------------------

### ESLint Configuration for Reanimated Hooks

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/web-support.mdx

Add this configuration to your ESLint setup to enable dependency array suggestions for Reanimated hooks. This assumes `eslint-plugin-react-hooks` is installed.

```json
{
  "rules": {
    "react-hooks/exhaustive-deps": [
      "error",
      {
        "additionalHooks": "(useAnimatedStyle|useDerivedValue|useAnimatedProps)"
      }
    ]
  }
}
```

--------------------------------

### Repeat Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withRepeat.mdx

This example showcases the use of withRepeat in conjunction with other animation functions, likely for more complex sequences. It's part of a larger interactive example.

```javascript
import SequenceWobble from '@site/src/examples/SequenceWobble';
import SequenceWobbleSrc from '!!raw-loader!@site/src/examples/SequenceWobble';

<InteractiveExample src={SequenceWobbleSrc} component={SequenceWobble}/>
```

--------------------------------

### Reanimated CSS Animation Direction Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-animations/animation-direction.mdx

An interactive example showcasing the animationDirection property in Reanimated.

```javascript
import React from 'react';
import Animated from 'react-native-reanimated';

const AnimationDirection = () => {
  return (
    <Animated.View
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'tomato',
        animationName: {
          from: {
            transform: [{ rotate: '0deg' }],
          },
          to: {
            transform: [{ rotate: '360deg' }],
          },
        },
        animationDuration: '3s',
        animationIterationCount: 'infinite',
        animationDirection: 'alternate',
      }}
    />
  );
};

export default AnimationDirection;
```

--------------------------------

### Analyze NextExample Bundle

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/next-example/README.md

Analyzes the NextExample app's bundle, generates a report, and opens it in the browser.

```bash
yarn build:analyze
```

--------------------------------

### Install patch-package

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-worklets/bundleMode/patches/README.md

Install `patch-package` as a development dependency in your project when using npm or Yarn Classic.

```bash
npm install patch-package --save-dev
```

--------------------------------

### Install React Native Reanimated (YARN)

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/fundamentals/getting-started.mdx

Use this command to install the react-native-reanimated package when using yarn.

```bash
yarn add react-native-reanimated
```

--------------------------------

### Configure ReduceMotion for withTiming and withDelay

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/accessibility.mdx

Demonstrates how to set `ReduceMotion.System` for `withTiming` and `withDelay` animations. By default, animations use `ReduceMotion.System`.

```javascript
import { withDelay, withTiming } from 'react-native-reanimated';

function App() {
  sv1.value = withTiming(0, { reduceMotion: ReduceMotion.System });
  sv2.value = withDelay(
    1000,
    withTiming(toValue, { duration }),
    ReduceMotion.System
  );
  // ...
}
```

--------------------------------

### Install Pods for MacOSExample macOS

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/macos-example/README.md

Install CocoaPods dependencies for the macOS platform within the MacOSExample directory.

```bash
cd ../macos
pod install
```

--------------------------------

### Build NextExample Without Minification

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/next-example/README.md

Builds the NextExample project without minification, useful for manual bundle review.

```bash
yarn build:disable-minification
```

--------------------------------

### Basic Sequence Animation

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withSequence.mdx

Demonstrates a basic sequence of animations using withSequence. This example shows how to run two timing animations one after another.

```javascript
import { withSequence, withTiming } from 'react-native-reanimated';

function App() {
  sv.value = withSequence(withTiming(50), withTiming(0));
  // ...
}
```

--------------------------------

### Install Pods for MacOSExample iOS

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/apps/macos-example/README.md

Install CocoaPods dependencies for the iOS platform within the MacOSExample directory.

```bash
cd ios
pod install
```

--------------------------------

### withDecay with Custom Configuration

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withDecay.mdx

This example shows how to configure `withDecay` with various options like deceleration, clamping, and rubber band effects. The `clamp` option is required when `rubberBandEffect` is enabled.

```javascript
import { withDecay } from 'react-native-reanimated';

function App() {
  sv.value = withDecay({
    velocity: 1000,
    deceleration: 0.99,
    clamp: [0, 500],
    rubberBandEffect: true,
    rubberBandFactor: 0.6,
    velocityFactor: 1,
    reduceMotion: 'system'
  });
  // ...
}
```

--------------------------------

### Interactive Example of getRelativeCoords

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/utilities/getRelativeCoords.mdx

This is an interactive example showcasing the `getRelativeCoords` functionality. It allows you to see the utility in action within a live environment.

```tsx
import RelativeCoords from '@site/src/examples/RelativeCoords';
import RelativeCoordsSrc from '!!raw-loader!@site/src/examples/RelativeCoords';

<InteractiveExample src={RelativeCoordsSrc} component={RelativeCoords}/>

```

--------------------------------

### Interactive ScrollTo Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/scroll/scrollTo.mdx

An interactive example demonstrating the usage of the scrollTo function. This snippet requires the '@site/src/examples/ScrollTo' component and its source code.

```tsx
import ScrollTo from '@site/src/examples/ScrollTo';
import ScrollToSrc from '!!raw-loader!@site/src/examples/ScrollTo';

<InteractiveExample src={ScrollToSrc} component={ScrollTo}/>
```

--------------------------------

### Install React Native Worklets (YARN)

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/fundamentals/getting-started.mdx

Install the react-native-worklets dependency separately using yarn. Ensure compatibility with your Reanimated version.

```bash
yarn add react-native-worklets
```

--------------------------------

### Install React Native Worklets (NPM)

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/fundamentals/getting-started.mdx

Install the react-native-worklets dependency separately using npm. Ensure compatibility with your Reanimated version.

```bash
npm install react-native-worklets
```

--------------------------------

### Creating and Using Synchronizable

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-worklets/docs/memory/synchronizable.mdx

Demonstrates how to create a Synchronizable object and access its value from the UI Runtime using getBlocking and setBlocking.

```tsx
import { createSynchronizable, scheduleOnUI } from 'react-native-worklets';

// RN Runtime, JS thread

const synchronizable = createSynchronizable({ a: 42 });

scheduleOnUI(() => {
  // UI Runtime, UI thread
  const value = synchronizable.getBlocking();
  console.log(value); // {a: 24}
});

// Could execute either before or after the UI Runtime reads the value.
synchronizable.setBlocking({ a: 24 });
```

--------------------------------

### Basic transitionDelay Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-transitions/transition-delay.mdx

Demonstrates the basic usage of transitionDelay with a single CSS property. This snippet shows how to set a delay of 300 milliseconds for the borderRadius transition.

```javascript
function App() {
  return (
    <Animated.View
      style={{
        transitionProperty: 'borderRadius',
        transitionDuration: 500,
        transitionDelay: '300ms',
      }}
    />
  );
}
```

--------------------------------

### Spring Carousel Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withSpring.mdx

An example demonstrating the usage of withSpring for creating a carousel animation. This snippet utilizes a custom component and its source code.

```javascript
import SpringCarousel from '@site/src/examples/SpringCarousel';
import SpringCarouselSrc from '!!raw-loader!@site/src/examples/SpringCarousel';

<InteractiveExample src={SpringCarouselSrc} component={SpringCarousel}/>
```

--------------------------------

### Basic transitionProperty Usage

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-transitions/transition-property.mdx

This example demonstrates the basic usage of `transitionProperty` to animate the 'width' style property. Ensure `transitionDuration` is also set for the transition to occur.

```javascript
function App() {
  return (
    <Animated.View
      style={{
        // highlight-next-line
        transitionProperty: 'width',
        transitionDuration: 300,
      }}
    />
  );
}
```

--------------------------------

### useAnimatedReaction Prepare Function Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/advanced/useAnimatedReaction.mdx

Illustrates how to define the 'prepare' function within useAnimatedReaction to extract a specific value, such as the floor of a shared value.

```jsx
function App() {
  useAnimatedReaction(
    // highlight-start
    () => {
      return Math.floor(sv.value);
    },
    // highlight-end
    (currentValue, previousValue) => {
      // ...
    }
  );
}
```

--------------------------------

### Manual Color Processing with processColor

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useAnimatedProps.mdx

This example shows how to manually process color-related properties using the `processColor` function when they are not automatically handled by Reanimated.

```APIDOC
## Manual Color Processing with processColor

### Description
Illustrates how to manually process color-related properties that are not automatically handled by Reanimated using the `processColor` function to ensure correct interpretation by the native side.

### Example

```jsx
import React from 'react';
import { useSharedValue, useAnimatedProps, interpolateColor, processColor } from 'react-native-reanimated';
import Animated from 'react-native-reanimated';

function App() {
  const colorProgress = useSharedValue(0);

  const animatedProps = useAnimatedProps(() => {
    const mainColor = interpolateColor(
      colorProgress.value,
      [0, 1],
      ['red', 'blue']
    );

    const bgColor = interpolateColor(
      colorProgress.value,
      [0, 1],
      ['green', 'yellow']
    );

    return {
      // `colors` prop is not on our list - we need to process it manually
      colors: processColor([mainColor, bgColor]),
    };
  });

  // Assuming you have a component that accepts a 'colors' prop
  // return <Animated.SomeComponent animatedProps={animatedProps} />;
  return null; // Placeholder as the component is not defined
}
```
```

--------------------------------

### Interactive useDerivedValue Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useDerivedValue.mdx

An interactive example showcasing the useDerivedValue hook. This snippet is intended to be run in an environment that supports React Native Reanimated components.

```javascript
import React from 'react';
import { View } from 'react-native';
import Animated, { useSharedValue, useDerivedValue, } from 'react-native-reanimated';

export default function DerivedValue() {
  const sv = useSharedValue(0);
  const derived = useDerivedValue(() => sv.value * 2);

  return (
    <View>
      <Animated.Text>Shared Value: {sv.value}</Animated.Text>
      <Animated.Text>Derived Value: {derived.value}</Animated.Text>
    </View>
  );
}
```

--------------------------------

### Example: Forwarding Relative Imports

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-worklets/docs/worklets-babel-plugin/options.mdx

Shows how the plugin forwards relative imports (e.g., from `./utils`) within modules that match a path specified in `relativePaths`. This ensures internal library calls via relative paths work correctly in worklets.

```javascript
export const relativeImportForwardingBefore = `
import { someExport } from './utils';

function foo() {
  'worklet';

  someExport();
}`;
```

```javascript
export const relativeImportForwardingAfter = `// Preserved in case it's used outside the worklet.
import { someExport } from './utils';

function foo() {
  'worklet';
  // highlight-next-line
  import { someExport } from './utils';
  someExport(); // Forwarded.
}`;
```

--------------------------------

### useSharedValue with get() and set() for React Compiler

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useSharedValue.mdx

Illustrates using the get() and set() methods for accessing and modifying shared values, which is recommended when using the React Compiler.

```javascript
function App() {
  const sv = useSharedValue(100);

  const animatedStyle = useAnimatedStyle(() => {
    'worklet';
    return { width: sv.get() * 100 };
  });

  const handlePress = () => {
    sv.set((value) => value + 1);
  };
}
```

--------------------------------

### Basic Usage of useAnimatedProps

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useAnimatedProps.mdx

This example demonstrates the basic usage of `useAnimatedProps` to animate the `opacity` prop of an `Animated.View`. It uses a shared value `sv` to control the opacity.

```jsx
import { useAnimatedProps } from 'react-native-reanimated';

function App() {
  // highlight-next-line
  const animatedProps = useAnimatedProps(() => {
    return {
      opacity: sv.value ? 1 : 0,
    };
    // highlight-next-line
  });

  // highlight-next-line
  return <Animated.View animatedProps={animatedProps} />;
```

--------------------------------

### Example: Forwarding Module Imports

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-worklets/docs/worklets-babel-plugin/options.mdx

Illustrates how the plugin forwards imports from a specified module (`my-library`) into a worklet. Imports from exact module names are processed by the plugin.

```javascript
export const importForwardingBefore = `
import { someExport } from 'my-library';

function foo() {
  'worklet';

  someExport();
}`;
```

```javascript
export const importForwardingAfter = `// Preserved in case it's used outside the worklet.
import { someExport } from 'my-library';

function foo() {
  'worklet';
  // highlight-next-line
  import { someExport } from 'my-library';
  someExport(); // Forwarded.
}`;
```

--------------------------------

### Custom Exiting Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/layout-animations/custom-animations.mdx

Provides a concrete example of a custom exiting animation. This snippet should be used when you need to define a specific animation for when an element leaves the screen.

```typescript
function CustomExitTransition (values: ExitAnimationsValues) => LayoutAnimation

type LayoutAnimation = {
    initialValues: StyleProps;
    animations: StyleProps;
    callback?: (finished: boolean) => void;
};

type ExitAnimationsValues = CurrentLayoutAnimationsValues &
    WindowDimensions;

type CurrentLayoutAnimationsValues = {
    ['currentOriginX', 'currentOriginY', 'currentWidth', 'currentHeight', 'currentBorderRadius', 'currentGlobalOriginX','currentGlobalOriginY']: number;
};

interface WindowDimensions {
    windowWidth: number;
    windowHeight: number;
}
```

--------------------------------

### Comparison of transitionBehavior: 'allow-discrete' vs 'normal'

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-transitions/transition-behavior.mdx

An interactive example comparing the visual effect of 'allow-discrete' and 'normal' transition behaviors on CSS properties in Reanimated.

```javascript
import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, { Easing } from 'react-native-reanimated';

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

const TransitionBehavior = () => {
  const [alignItems, setAlignItems] = React.useState('flex-start');

  React.useEffect(() => {
    setTimeout(() => {
      setAlignItems('flex-end');
    }, 1000);
  }, []);

  return (
    <Animated.View
      style={[
        styles.box,
        {
          alignItems: alignItems,
          transitionProperty: 'alignItems',
          transitionDuration: 500,
          transitionTimingFunction: Easing.inOut(Easing.quad),
          transitionBehavior: 'allow-discrete',
        },
      ]}
    />
  );
};

export default TransitionBehavior;
```

--------------------------------

### Basic Animation Iteration Count Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/css-animations/animation-iteration-count.mdx

This example demonstrates how to use `animationIterationCount` to make an animation repeat indefinitely. Ensure you have the necessary imports for Reanimated components and styles.

```javascript
function App() {
  return (
    <Animated.View
      style={{
        animationName: {
          from: { width: 120 },
          to: { width: 240 },
        },
        animationDuration: '1s',
        animationIterationCount: 'infinite',
        animationDirection: 'alternate',
      }}
    />
  );
}
```

--------------------------------

### Jest Setup for Reanimated Tests

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/guides/testing-with-jest.mdx

Add this line to your `jest-setup.js` file to configure Reanimated's testing environment. The `setUpTests()` function can accept an optional configuration object, with a default FPS of 60.

```javascript
require('react-native-reanimated').setUpTests();
```

--------------------------------

### Expensive Initial Value with Function

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useSharedValue.mdx

Shows how to use a function to compute an expensive initial value for a shared value, ensuring it's only calculated once on mount.

```javascript
const sv = useSharedValue(() => computeExpensiveInitialValue());
```

--------------------------------

### Install Reanimated from Local TGZ

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/RELEASE.md

Add the Reanimated package to a React Native Web app by installing a local .tgz file. This is useful for testing a specific build before publishing.

```bash
yarn add ~/Downloads/react-native-reanimated-x.y.z.tgz
```

--------------------------------

### Animating Component Properties

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/core/useAnimatedProps.mdx

This interactive example demonstrates how to animate properties of a component using `useAnimatedProps`. It allows you to see the animation in action and experiment with different property values.

```jsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const AnimatedBox = Animated.createAnimatedComponent(View);

const AnimatingProps = () => {
  const width = useSharedValue(100);
  const height = useSharedValue(100);
  const borderRadius = useSharedValue(10);
  const backgroundColor = useSharedValue('#FF0000'); // Red

  const animatedProps = useAnimatedProps(() => {
    return {
      style: {
        width: width.value,
        height: height.value,
        borderRadius: borderRadius.value,
        backgroundColor: backgroundColor.value,
      },
    };
  });

  React.useEffect(() => {
    // Animate properties after a delay
    const timeoutId = setTimeout(() => {
      width.value = withTiming(200, { duration: 1000, easing: Easing.inOut(Easing.quad) });
      height.value = withTiming(150, { duration: 1000, easing: Easing.inOut(Easing.quad) });
      borderRadius.value = withTiming(50, { duration: 1000, easing: Easing.inOut(Easing.quad) });
      backgroundColor.value = withTiming('#0000FF', { duration: 1000, easing: Easing.inOut(Easing.quad) }); // Blue
    }, 1000);

    return () => clearTimeout(timeoutId);
  }, []);

  return (
    <View style={styles.container}>
      <AnimatedBox animatedProps={animatedProps} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
});

export default AnimatingProps;
```

--------------------------------

### Interactive Decay Train Animation Example

Source: https://github.com/software-mansion/react-native-reanimated/blob/main/docs/docs-reanimated/docs/animations/withDecay.mdx

This example showcases an interactive `withDecay` animation, specifically designed to simulate the motion of a train. It allows users to drag the train and observe its natural deceleration.

```javascript
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Animated, { useSharedValue, useAnimatedGestureHandler, withDecay } from 'react-native-reanimated';
import { GestureHandlerRootView, PanGestureHandler } from 'react-native-gesture-handler';

const DecayTrain = () => {
  const offset = useSharedValue(0);

  const gestureHandler = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
      ctx.offsetX = offset.value;
    },
    onActive: (event, ctx) => {
      offset.value = ctx.offsetX + event.translationX;
    },
    onEnd: (event) => {
      offset.value = withDecay({
        velocity: event.velocityX,
        deceleration: 0.995,
        clamp: [-200, 200],
      });
    },
  });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <PanGestureHandler onGestureEvent={gestureHandler}>
        <Animated.View
          style={{
            width: 150,
            height: 100,
            backgroundColor: 'lightblue',
            borderRadius: 10,
            transform: [{ translateX: offset.value }],
          }}
        />
      </PanGestureHandler>
    </GestureHandlerRootView>
  );
};

export default DecayTrain;

```