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
- Add Reanimated's babel plugin to your
babel.config.js
module.exports = { ... plugins: [ ... 'react-native-reanimated/plugin', ], };
- Turn on Hermes engine by editing
android/app/build.gradle
project.ext.react = [ enableHermes: true // <- here | clean and rebuild if changing ]
- 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
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.