react navigation drawer giving me Invariant Violation: Module AppRegistry is not a registered callable module

Question

I had a problem in one of my other project and it pointed to the react navigation drawer I was using, so I decided to open a test file to try recreating the problem

I copied the code from the react navigation website and ran it and it gave me this error

ERROR  TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')
 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.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling unmountApplicationComponentAtRootTag). 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.
ialization error when loading React Native.

here is the code

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

function Feed() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Feed Screen</Text>
    </View>
  );
}

function Article() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Article Screen</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

and here are the packages I have downloaded

  "dependencies": {
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native": "^6.0.6",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.1.1",
    "react-native-reanimated": "^2.3.1",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1"
  },

I seen online that its likely i forgot to download something but I could figure out what

https://stackoverflow.com/questions/43604603/module-appregistry-is-not-registered-callable-module-calling-runapplication might be this will help you thanks — sourabh atigre, Jan 14 '22 at 17:57

score 8 · Accepted Answer · answered Jan 16 '22 at 09:17

So~ this happened because of not properly installing react-native-reanimated(very common reason for the invariant Violation: Module AppRegistry is not a registered callable module),

to solve this issue just follow the documentation on the react-native-reanimated website https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

step 1: in babel.config.js

    module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',//Add this
      ],
  };

step 2: in android/app/build.gradle

project.ext.react = [
  enableHermes: true  // <-change this to true
]

step 3 : 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() {      <- add this block
        return new ReanimatedJSIModulePackage(); // 
      }
///////////////////////////////////////////////////
    };

step 4 : in terminal

cd android 
./gradlew clean
cd ../

step 5 : just to be safe

npx react-native run-android -- --reset-cache

You're the hero of the day. Thanks. I didn't read the docs for thought I didn't use reanimated2 library But that's okay. Additionally must I use turbo mode? Cuz I'm getting a new console warning while I use reanimated2.. like "you're using an old API for gesture." — Cagkan Mert Oztas, Jan 17 '22 at 13:09
@Misa I got `Cannot invoke method getAbsolutePath() on null object` error at step4 Do you know why? thank you! — Cindy, Dec 24 '22 at 11:49
well I have not seen any concerns raised about Hermes yet, granted I'm not very experienced in the computing field so if it's possible can you enlighten me with what your concern.(I just want to explore if there is any risk to it) — Misa, Feb 19 '23 at 12:09

react navigation drawer giving me Invariant Violation: Module AppRegistry is not a registered callable module

1 Answers1