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

image
image
image

Steps To Reproduce

  1. 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.

image

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

4 thoughts on “Importing createDrawerNavigator throws ‘NativeReanimated’ error.

  1. 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.

  2. 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.

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

  4. 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.