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