Invariant Violation: "main" has not been registered

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.

This worked for me:

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

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);

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

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.

workarounded by:

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

index.js

AppRegistry.registerComponent("X", () => Root);

If you are facing this issue in Android then make sure that both mainactivity.java and index.js contains same "X"

mainActivity.java

@Override
protected String getMainComponentName() {
   return "X";
}

If you are facing this issue in iOS then make sure that both AppDelegate.m and index.js contains same "X"

AppDelegate.m

 RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"X" initialProperties:nil];

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);
}

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.

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.

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

import app name from app.json like this:

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

then add appname in registerComponent

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

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.

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

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);

I'm not great at diagnosing these stack traces but my project just suddenly started throwing this error. I installed react-native-skeleton-content which then threw errors for react-native-gesture-handler here I am thinking that gesture handler was just a result of some other peer dependency updating.

I uninstalled both and voila. The expo server runs again and processes the app just fine. Had I slept on it I never would have known but yeah, as a newbie, try deleting a new package you just installed and it's dependencies. It's likely the cause of a new issue.

I finally found a solution that worked for me!

I just execute it again:

npm install -g expo-cli

ps.: In my case, it may have happened because I tried to install Turtle CLI and had to remove it to free disk space. This may have corrupted the expo files.

For iOS, we need to make one additional change in ios>appName>AppDelegate.mm file,

Search for RCTAppSetupDefaultRootView and update old_app_name to new_app_name