Unable to resolve module `react-native-reanimated`

Question

React native project running fine without react navigation tab module, once I installed the tab module using

npm install --save react-navigation-tab

The following error occure on node terminal.

React-tab-navigation throwing the following error.

error: bundling failed: Error: Unable to resolve module react-native-reanimated from node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js: react-native-reanimated could not be found within the project.

Answer 1

react-navigation-tabs depends on react-navigation package.
So I think you missed the Getting Started section.

Currently for react-navigation 4.x you should:

yarn add react-navigation
yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

Then for ios:

cd ios
pod install

To finalize installation of react-native-screens for Android, add the following two lines to dependencies section in android/app/build.gradle:

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

And then

react-native link react-native-reanimated

Answer 2

If you are working with Expo

I had the exact same problem this is what I did and it worked!!

Follow the Getting started guide

This is basically install the required dependencies for react Navigation https://reactnavigation.org/docs/getting-started/

yarn add @react-navigation/native

and

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Then I realized that react-native-reanimated was within the unmet peer dependencies, so to ensure that the proper version is installed you have to run expo install react-native-reanimated

try again and that's it!!

pdta...

I figured out this because I deleted the node_modules folder and installed again all the dependencies by yarn install so, if have a problem this would be the desperate last try. though I dont think this will be necesary.

Answer 3

React Native CLI

I had experienced the same issue with react-native: "^0.64.0" and react-navigation 5.x

I had followed the installation on the React Navigation Getting Started. I started out using createStackNavigator and createBottomTabNavigator and my builds we working fine.

As soon as I added createDrawerNavigator my builds were failing with errors:

Unable to resolve module react-native-reanimated

and/or

Invariant Violation: TurboModuleRegistry.getEnforcing(…): 'NativeReanimated' could not be found

Dependencies

Installation of React Navigation

npm install @react-navigation/native

Installing dependencies

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Reason for Issue

Reanimated dependency "react-native-reanimated": "^2.0.0" as stated in the official documentation requires some additional configs, including babel, Hermes, and MainApplication.java to work properly with React Native.

I guess Reanimated ^2.0.0 is not yet supported on React Native ^0.64.0

Check the solution below or follow the official documentation to resolve React Native Reanimated

requires additional steps apart from just adding a dependency to package.json

Solution

NOTE: After making changes make sure to clear gradle and yarn caches

Three changes needs to be made

1. Add Reanimated's babel plugin to your babel.config.js

  module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

2. Turn on Hermes engine by editing android/app/build.gradle

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

3. Plug Reanimated in MainApplication.java

  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

---

Answer 4

I'm using react-native 0.67 version

I follow the following step to fix it

step 1. npm i react-native-reanimated

step 2. add plugin babel.config.js

plugins: ['react-native-reanimated/plugin'],

step 3 When trying to run the code after close the terminal I still I'm facing same issue

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

step 4. After that, i close the current terminal and run this command

npm start -- --reset-cache 

now issue in fixed.