react-native-reanimated: Can't be used with React Navigation/Drawer V6

Description

Can’t be used with Drawer Navigator in React Navigation.

Expected behavior

Able to create and use Drawer Navigator with no exception.

Actual behavior & steps to reproduce

Just trying to create Drawer object.

import {createDrawerNavigator} from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

And it throws an error.

 ERROR  TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode')
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. 
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Snack or minimal code example

// source: https://reactnavigation.org/docs/drawer-based-navigation

import * as React from 'react';
import {Button, View} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {NavigationContainer} from '@react-navigation/native';

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator(); // error

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Package versions

  • React Native: 0.65.1
  • React Native Reanimated: 2.2.0
  • React Navigation Drawer: 6.1.4
  • React Navigation Native: 6.0.2
  • React Navigation Gesture Handler: 1.10.3
  • NodeJS: v16.6.2
  • Xcode:
  • Java & Gradle: 11.0.12

Affected platforms

  • Android
  • iOS
  • Web

Temporary Resolve Method

It works with "react-native-reanimated": "^1.13.2".

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 23
  • Comments: 34 (7 by maintainers)

Commits related to this issue

Most upvoted comments

This worked for me.

  1. npm i react-native-reanimated
  2. Add plugins: ['react-native-reanimated/plugin'], below presets in ‘<your_app_root_folder>/babel.config.js’.
  3. Add import 'react-native-gesture-handler'; to the top of ‘<your_app_root_folder>/App.js’.
  4. Reset the cache using npx react-native start --reset-cache.
+17
Manil-SoftNEP on Jun 6, 2022

Hey @efefurkankarakaya
We are working on a solution to this problem.

+16
piaskowyk on Aug 24, 2021

How to solve this error without downgrading react-native-reanimated

+15
ppritesh on Feb 20, 2022

Hey @efefurkankarakaya We are working on a solution to this problem.

Stuck at this for weeks… any temporary solution?

Temporary solution / resolve method as I mentioned in the main post is

It works with “react-native-reanimated”: “^1.13.2”.

Can be installed with npm install react-native-reanimated@1.13.2

+4
efefurkankarakaya on Sep 16, 2021

Hey @efefurkankarakaya We are working on a solution to this problem.

Stuck at this for weeks… any temporary solution?

+4
0nlyDev on Sep 7, 2021

Clearing the cache after upgrading from react-native-reanimated@1.13.2 helped in my case: Just ran npm start -- --reset-cache and the error disappeared.

+3
durac on Dec 1, 2021

@piaskowyk all good, the issue seemed to be something from my end.

+1
andib0 on May 21, 2023

I was using "@react-navigation/drawer": "^6.6.0" with "react-native-reanimated": "^3.0.0". These were the fixes for me:

npm uninstall react-native-reanimated
npm install react-native-reanimated@2.2.4
npx react-native start --reset-cache
+1
shahnawaz-pabon on Mar 3, 2023

To sum up: I understand that the repo where the issue can be reproduced is here: https://github.com/efefurkankarakaya/react-native-reanimated-reproduction

Can you update the issue description such that all up-to-date information is in one place?

+1
kmagiera on Jan 28, 2022

@InterstateTAT make sure that the libraries have really been updated on the Java side autolinking solved the issue for me

+1
belaziv on Jan 27, 2022

It really looks like a problem with the cache. I wasn’t able to reproduce this issue 😕 Could you prepare a repo with reproduction? Without this repo, I can’t help you, unfortunately.

Actually, I’ve just tried it again and this error still exist with the newest version of React Native and React Navigation.

Error log:

error: Error: Unable to resolve module ./Transitioning from /home/efk/Desktop/env/testProject/node_modules/react-native-reanimated/src/Animated.js: 

None of these files exist:
  * node_modules/react-native-reanimated/src/Transitioning(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * node_modules/react-native-reanimated/src/Transitioning/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
> 1 | import { Image, ScrollView, Text, View } from 'react-native';
  2 | import createAnimatedComponent from './createAnimatedComponent';
  3 | import {
  4 |   addWhitelistedNativeProps,
    at ModuleResolver.resolveDependency (/home/efk/Desktop/env/testProject/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:107:15)
    at DependencyGraph.resolveDependency (/home/efk/Desktop/env/testProject/node_modules/metro/src/node-haste/DependencyGraph.js:288:43)
    at Object.resolve (/home/efk/Desktop/env/testProject/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/home/efk/Desktop/env/testProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /home/efk/Desktop/env/testProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/home/efk/Desktop/env/testProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/home/efk/Desktop/env/testProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async addDependency (/home/efk/Desktop/env/testProject/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 7)

Full package.json of current status.

{
  "name": "testproject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "react": "17.0.2",
    "react-native": "0.66.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^2.2.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

But it doesn’t throw an error with react-native-reanimated@1.13.2, works well.

{
  "name": "testproject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "react": "17.0.2",
    "react-native": "0.66.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

Full package.json of working situation is above.

By the way this project does not have anything but App.js and I’ve already specified where I took it from the code but of course, I’ll share it as a repository.

Working version @1.13.2 reproduction: https://github.com/efefurkankarakaya/react-native-reanimated-1.13.2-reproduction Faulty / not working version reproduction: https://github.com/efefurkankarakaya/react-native-reanimated-reproduction

+1
efefurkankarakaya on Nov 9, 2021
Read more comments on GitHub
← react-native-reanimated: Cannot find module 'react-native-reanimated/plugin' from project folder
react-native-reanimated: Can't cast NoopNode to ClockNode on Android →