'Invariant Violation: "main" has not been registered

New to React Native: I started a brand new project with Expo init and then I followed the instructions mentioned inhttps://reactnavigation.org/docs/hello-react-navigation I run the project with expo start and I get this error. Invariant Violation: "main" has not been registered. This can happen if:

Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

invariant browser.js:38:14 runApplication AppRegistry.js:193:13 __callFunction MessageQueue.js:425:19 __guard$argument_0 MessageQueue.js:112:6 __guard MessageQueue.js:373:10 callFunctionReturnFlushedQueue MessageQueue.js:111:4 callFunctionReturnFlushedQueue [native code]:0 Any suggestions?

Solution 1:^[1]

Open the index.js, the content of the file should be like this:

import { AppRegistry, Platform } from 'react-native';
import App from './App';

AppRegistry.registerComponent('X', () => App);

if (Platform.OS === 'web') {
    const rootTag = document.getElementById('root') || document.getElementById('X');
    AppRegistry.runApplication('X', { rootTag });
}

If you have this error Invariant Violation: “main” has not been registered you have to replace the 'X' by 'main'.

Another example :

If you have this error Invariant Violation: “app” has not been registered you have to replace the 'X' by 'app'.

For android :

Open ./android/app/src/main/java/[multiple folders]/MainActivity.java

/**
   * Returns the name of the main component registered from JavaScript.
   * This is used to schedule rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "X";
  }

The 'X' of MainActivity.java and index.js must match.

Solution 2:^[2]

The problem is that if you are using expo then you have to registerComponent differently. All the information is in the docs. https://docs.expo.io/versions/latest/sdk/register-root-component/

import { registerRootComponent } from 'expo';
import React from 'react';
import { View } from 'react-native';

class App extends React.Component {
  render() {
    return <View />;
  }
}

registerRootComponent(App);

Solution 3:^[3]

This worked for me:

delete node_modules and your lockfile (package-lock.json / yarn.lock)
change the expo package version in package.json to 38.0.8
run yarn or npm install
run expo install react-native-safe-area-context

Solution 4:^[4]

In my case, the problem was solved when I called

AppRegistry.registerComponent(appName.toLowerCase(), () => App);

in index.js. So it looks like the first parameter is to be passed based on what error message is shown. In my case, my project name was AwesomeProject and the error reported by Metro was:

Invariant Violation: "awesomeproject" has not been registered.

so I figured that adding toLowerCase() will solve the problem and it did!!

However, I was facing this problem when trying to run it on macos using npx react-native run-macos and after this was solved, I tried to invoke the iOS version, then I got Invariant Violation: "AwesomeProject" has not been registered.

So finally I got both working by registering the App twice as below:

AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName.toLowerCase(), () => App);

The same also works with npx react-native run-android.

Solution 5:^[5]

workarounded by:

AppRegistry.registerComponent('main', () => App);

Solution 6:^[6]

In my case, I had a class that existed solely to model the structure of a meal i.e not a react class component. I forgot to export that class but was calling it in the application
new Meal(foo, bar .....)
and that triggered this error. I found it by just tracing my steps to the most recent addition I had made before I started getting this error.

Solution 7:^[7]

In my case I was missing some packages which are mandatory to install.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Solution 8:^[8]

import app name from app.json like this:

import {name as appName} from './app.json';

then add appname in registerComponent

AppRegistry.registerComponent(appName, () => App);

Solution 9:^[9]

In my case it a specific package called graphql-type-json that was the problem. So the 2nd part of the error was referring to the real issue:

A module failed to load due to an error and AppRegistry.registerComponent wasn't called."'

The loading of the incriminated package was throwing an error 'GraphQLError: Syntax Error: Expected Name, found "}".' which stopped the App loading and threw the Invariant Violation error.

After removing precisely the graphql-type-json (yarn remove graphql-type-json) package, expo loaded fine again.

Solution 10:^[10]

Change your index.js .

import { AppRegistry, Platform } from "react-native";
import { registerRootComponent } from "expo";
import App from "./App";
import { name as appName } from "./app.json";

// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
// It also ensures that whether you load the app in the Expo client or in a native build,
// the environment is set up appropriately
if (Platform.OS == "android") {
  registerRootComponent(App);
} else {
  AppRegistry.registerComponent(appName, () => App);
}

Solution 11:^[11]

The main reason to get this error is that, for some reason, App.js is not functioning properly. It may be because that you are running the server from a wrong folder. In my case, I always got another error along with this error, so I kept fixing those and this error got resolved automatically.

Solution 12:^[12]

If you're using react-native-reanimated and Expo, make sure to install it using:

expo install react-native-reanimated

See the documentation for further help

Solution 13:^[13]

It can happen after you've used expo prebuild --clean and when in your Podfile/AppDelegate.m was some 3rd party library specific import, like react-native-maps, or Google Maps API Key.

You'd need to put back these imports into Podfile/AppDelegate.m, next cd ios, next pod install. Still, expo start might be not enough and you'd need to build your project using Xcode. After building & running your code on Xcode, the error will be gone and the emulator will start.

There is some difference between how Expo and Xcode build/simulate the app, but I'm at quite an early stage regarding distinguishing these differences. I've also noticed sometimes you need to first build the project on Xcode first, if the app isn't installed on the simulator yet, and only then running the app from simulator launched via expo start --dev-client. Otherwise, I was getting an error Error: The development client (com.XYZ.ABC) for this project is not installed. Please build and install the client on the simulator first. or Invariant Violation: Native module cannot be null. or Invatian Violation: 'main' has not been registered....

Solution 14:^[14]

If you have changed the application and package name using react-native-rename, in the file ios/AppName/AppDelegate.mm Synchronize the application name with the app.json file by finding the lineUIView *rootView = RCTAppSetupDefaultRootView(bridge, @"AppName", nil);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	justcodin
Solution 2	Paul Oskar Soe
Solution 3	Emil Hietanen
Solution 4
Solution 5	Eugene Christian
Solution 6	Dharman
Solution 7	Faisal Mushtaq
Solution 8	iman roosta
Solution 9	Zoe stands with Ukraine
Solution 10	alexander ferreras
Solution 11	RRG
Solution 12	Myzel394
Solution 13
Solution 14	muratGursel

'Invariant Violation: "main" has not been registered

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]