Unable to resolve module `react-native-reanimated`

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

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
      }
    };
  ...

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.

Tags:

React Native Android

Recent Posts