Invariant Violation: "main" has not been registered

Question

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?

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

workarounded by:

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

Answer 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

Answer 8

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

Answer 9

Your app name from './app.json' must be the same as in the getMainComponentName method on MainActivity.java.

Answer 10

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

Answer 11

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.

Answer 12

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.

Answer 13

import app name from app.json like this:

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

then add appname in registerComponent

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

Answer 14

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.

Answer 15

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.orInvariant Violation: Native module cannot be null.orInvatian Violation: 'main' has not been registered...

Answer 16

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

Answer 17

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.

Answer 18

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

Answer 19

Deleting node modules and package_lock.json and npm or yarn install worked for me:

1. Delete these folders
2. Run npm install or yarn install

Answer 20

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.

Answer 21

The following worked for me:

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