react-native-reanimated: Importing createDrawerNavigator throws 'NativeReanimated' error.

Description

After following the installation instructions for React Navigation and then Drawer Navigation, I am getting a NativeReanimated error.

I have reanimated in both my package-lock.json:

"react-native-reanimated": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-2.0.0.tgz",
      "integrity": "sha512-kIrdBoXSky7DQ62SOgosgimKM+Lt+SzAaM+ovVpCLBcwUK2aYRfLxa9ffgvKjeH9/n7dONlwEMjbKssGkuyq2Q==",
      "requires": {
        "@babel/plugin-transform-object-assign": "^7.10.4",
        "fbjs": "^3.0.0",
        "mockdate": "^3.0.2",
        "string-hash-64": "^1.0.3"
      }

and in my package.json:

"dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/drawer": "^5.12.4",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.0.0",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.18.1"
  }

It was installed vis the React Navigation instructions as follows: npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

This is the error I’m receiving in Metro and node after running npx react-native run-android: [Sat Mar 06 2021 10:25:12.380] BUNDLE ./index.js

[Sat Mar 06 2021 10:25:15.192] ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(…): ‘NativeReanimated’ could not be found. Verify that a module by this name is registered in the native binary. [Sat Mar 06 2021 10:25:15.196] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication) [Sat Mar 06 2021 10:25:15.196] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

In the emulator I’m just receiving a blank white screen.

Screenshots

Steps To Reproduce

Try to run the app via: npx react-native run-android

Expected behavior

The app should run.

Actual behavior

I get a blank white screen.

Snack or minimal code example

Commenting out this line: import { createDrawerNavigator } from ‘@react-navigation/drawer’; fixes the error.

Package versions

Windows 10 Visual Studio Code

"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/drawer": "^5.12.4",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.18.1"

NodeJS: v10.19.0

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 6
Comments: 22

Commits related to this issue

Let users use v1 without additional steps (#1845) Fixes: https://github.com/software-mansion/react-native-reanimated/issues/1838 Fixes: https://github.com/software-mansion/react-native-reanimated/is... — committed to software-mansion/react-native-reanimated by deleted user 3 years ago

Most upvoted comments

run npx react-native start --reset-cache after that npx react-native run-android or npx react-native run-ios

+18

raajnadar on Mar 11, 2021

run npx react-native start --reset-cache after that npx react-native run-android or npx react-native run-ios

thank yo bro… I almost went crazy.

YunusEmreNalbant on Mar 11, 2021

I just ran the following in my project directory: npm start -- --reset-cache

Yay - it finally works. I’ve tried a couple of things before it has actually worked. I had to reinstall / downgrade the react-navigation libs AND downgrade to the older react-native-reanimated@1.13.2.

Since I’ve tried a lot of combinations and I am not sure how reliable the integrated terminal history of VSCode with PS is, I am not 100% sure if these were the commands. However they might help for future reference.

# install after react-navigation instructions --> npm install @react-navigation/native AND npm install @react-navigation/drawer

# remove core elements like drawer and reinstall using older / current version
npm uninstall @react-navigation/drawer @react-navigation/native @react-navigation/stack
npm install --save @react-navigation/drawer@5.12.3 @react-navigation/native@5.9.2 @react-navigation/stack@5.14.2

# maybe uninstall before? --> npm uninstall react-native-reanimated (I think I've skipped this)
# install older version
npm install --save react-native-reanimated@1.13.2

# start app on device (maybe delete first)
npx react-native run-android

# reset cache if not working
npm start -- --reset-cache

Besides this seems like “just a temp. fix” so this problem might happen with future versions before we determined the cause.

konstantingoretzki on Mar 10, 2021

I have solved this problem. Move on to React Navigation v6 . V6 is mostly same as V5. if not solved than down grade react-native-reanimated to version 1. Don’t forget to start react native project with npx react-native start --reset-cache

lavpreetsandhu on Mar 16, 2021

I can’t run any of my applications in react native on my android simulator with reanimated2 (DrawerNavigator throws an error, NativeReanimated not found). Are you sure this new module have ever been tested before commiting?

AlgoPole on Mar 12, 2021

Hello, I am currently having the same problem on Android since I upgraded react-native-reanimated to version 2.0.0. I had to downgrade back to version 1.13.2.

After I uninstall reanimated then install version 1.13.2 I get the following error: error: Error: Unable to resolve module ./reanimated2 from ...\node_modules\react-native-reanimated\src\Animated.js:

Can confirm this behaviour. Downgrading throws the same error on my side.

Here are my dependencies:

    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/netinfo": "^6.0.0",
    "@react-navigation/drawer": "^5.12.4",
    "@react-navigation/native": "^5.9.3",
    "@react-navigation/stack": "^5.14.3",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-android-location-enabler": "^1.1.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.18.1"

Also using VSCode on Win 10.

konstantingoretzki on Mar 8, 2021

React navigation v5 is not compatible with reanimated 2

raajnadar on Mar 12, 2021

I get same error too while using reanimated version 2.0.0 I install version react-native-reanimated": “^1.13.2”. It is working fine.

fatihkck on Mar 8, 2021

FYI. I faced same issue while using reanimated version 2.0.0

Version “react-native-reanimated”: “^1.13.2” works fine.

usinghs on Mar 7, 2021