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

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

Solution 1:

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