Installation Guide for React Native Reanimated

Follow these steps to add Reanimated to your project:

---

Step 1: Install the Package

Install the react-native-reanimated package from npm:

Using npm:

npm install react-native-reanimated

---

Step 2: Add Reanimated’s Babel Plugin

Add the react-native-reanimated/plugin plugin to your babel.config.js file:

module.exports = {
  presets: [
    // ... (don't add it here :))
  ],
  plugins: [
    // ... other plugins
    'react-native-reanimated/plugin',
  ],
};

Caution: react-native-reanimated/plugin must be listed last in the plugins array.

Why do I need this?

This plugin ensures proper handling of Reanimated’s worklets during the bundling process.

---

Step 3: Wrap Metro Config with Reanimated Wrapper (Recommended)

Wrap your existing Metro configuration in the metro.config.js file using the wrapWithReanimatedMetroConfig function:

// metro.config.js
const {
  wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');

const config = {
  // Your existing Metro configuration options
};

module.exports = wrapWithReanimatedMetroConfig(config);

Why should I do this?

This wrapper ensures that Reanimated’s native code is properly integrated with Metro, improving compatibility and performance.

---

Step 4: Clear Metro Bundler Cache (Recommended)

Clear the Metro bundler cache to ensure all changes are applied correctly:

Using npm:

npm start -- --reset-cache

---

完成上面信息如果还报错 请按照以下步骤

---

Troubleshooting Steps

If the app fails to build or run, follow these steps:

1. Ensure Dependencies Are Installed

Run the following commands to install all dependencies:

yarn install
cd ios && pod install

2. Restart the Development Server

Stop the current development server and restart it:

npx react-native start --reset-cache

3. Clean and Rebuild the Project

Clean the project cache and rebuild:

cd ios
xcodebuild clean

Re-run the app:

npx react-native run-ios