30

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.

1
  • I get the same error right now! But I guess is react-navigation-tabs, try again!
    – Chiien
    Sep 27, 2019 at 18:48

18 Answers 18

32

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
18

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

yarn warning

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.

1
  • I had to do yarn cache clean as well (after removing node modules)
    – manuelmhtr
    Feb 10, 2022 at 19:21
9

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.

2
  • it works! I am using react-native-router-flux Feb 18, 2022 at 10:33
  • for expo managed projects run expo r -c May 15, 2022 at 12:20
4

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',
      ],
  };
  1. Turn on Hermes engine by editing android/app/build.gradle
project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]
  1. 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
      }
    };
  ...

2
  • Please provide some more explanation on the answer and the documentation which can easily help others as well. Mar 23, 2021 at 17:25
  • @VivekSingh sure, I had made updates to clarify my answer and the documentation. Out of curiosity though you could have just skipped my shallow answer, why then ask that I explain a bit further? I am a new contributor I would be happy to hear what you have to say ...
    – Phelang
    Mar 24, 2021 at 6:03
3

I received the same error and this is how I went about fixing it:

  1. Download react native project from github
  2. Run the following command:
npm install
react-native start
react-native run-android

Then build your app.

  1. When it completes the build, move your required profile jects and install your required npm packages.
  2. Run the following commands:
npm cache clean --force
cd android
gradlew clean
gradle cleanBuildCache
gradlew build --refresh-dependencies
cd ..
npx react-native start --reset-cache
npx react-native run-android
3

npx react-native-clean-project have solved my problems

1
  • This seems like it did it for me after trying everything else and failing. Feb 12 at 21:59
3

In my case, it worked

1: Install it

npx expo install react-native-reanimated 

2: add in babel.config.js

plugins: [
      [
          'module-resolver',
          {
              alias: {
                  '@': './src',
                  'assets': './assets',
              }
          },
      ],
      'react-native-reanimated/plugin'
   ],

3: run again

npx start --reset-cache
2

Reanimated Version: 2.0.0

Downgrade to 1.13.2 solved the problem, unfortnutely

1

Install **react-native-reanimated** library

npm i react-native-reanimated

1

For anyone that is able to uninstall react-native-reanimated without issues to their application, all I had to do was uninstall the current react-native-reanimated with(from the node_modules folder):

npm uninstall react-native-reanimated  

I then ran

npm install react-navigation-tabs --save

Reload and problem solved for me.

Similar to the reinstall a lower version except this way react-navigation-tabs will install the one it wants.

1
  • This was by far the simplest solution for me. I was getting my issue when it came to import { createBottomTabNavigator } from "react-navigation-tabs"; Jan 18, 2022 at 22:22
1

Currently for [email protected], you should install react-native-gesture-handler and react-native-reanimated.

If you have an Expo managed project, in your project directory, run:

expo install react-native-gesture-handler react-native-reanimated

If you have a bare React Native project, in your project directory, run:

yarn add react-native-gesture-handler react-native-reanimated

important: To finalize the installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

import 'react-native-gesture-handler';
0

Reanimated v2 only supports react-native 0.62+

So if you are using a lower version downgrade version as @mehmet-emin-sayım said - Downgrade to 1.13.2 solved the problem

https://docs.swmansion.com/react-native-reanimated/docs/

0

I was trying the mentioned steps in Reanimated Documentation Installation but it was not working for me.

1: I add the following code in my babel.config.js because I am using React-Native CLI

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

//...........OR..........(You can add any)

 module.exports = function (api) {
      api.cache(true);
      return {
        presets: ['module:metro-react-native-babel-preset'],
        plugins: ['react-native-reanimated/plugin'],
      };
    };

2: After that, I added this line at the top of my App.js:

import 'react-native-gesture-handler';

3: Reset the cache:

npx react-native start --reset-cache

0

For Expo Web, there is an extra step to fix this error message.

Reanimated for Web requires the following configuration steps. You need to add @babel/plugin-proposal-export-namespace-from as well as Reanimated Babel plugin to your babel.config.js.

Source: https://docs.swmansion.com/react-native-reanimated/docs/guides/web-support

$ yarn add @babel/plugin-proposal-export-namespace-from
// babel.config.js

module.exports = {
  presets: [
      ...
  ],
  plugins: [
    ...
    '@babel/plugin-proposal-export-namespace-from', 👈
    'react-native-reanimated/plugin',
  ],
};

At the end, clear the expo web cache and restart the project.

$ rm -rf .expo/web/cache
0

Make sure to reset your bundler's cache (yarn start --reset-cache or npm start -- --reset-cache).

0

Downgrade reanimated from version 3.5.4 to v3.3.0 worked for me:

npm install [email protected]

New contributor
Fernando Rizza is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
-1

This is because react-native-reanimated.

Just use

npm i react-native-reanimated@1

it will download react-native-reanimated: "^1.13.3" which is competitive to react-navigation-tab.

Then use

npm install --save react-navigation-tab
-1

For me, this was fixed by running

npm uninstall react-native-reanimated
npm install react-native-reanimated

For Expo users: I am intentionally avoiding expo install react-native-reanimated here.

1
  • not worked for me
    – Chandni
    Jul 21 at 4:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.