107

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?

4
  • 15
    We just had the same problem, still not quite sure what the actual problem is but deleting .expo .expo-shared package-lock.json and node_modules and if you are using yarn then yarn.lock. And then running npm run start did the trick
    – oliverwebr
    Commented Jul 1, 2020 at 11:39
  • 1
    This happened to me when removing and changing packages in package.json. Eg, I upgraded react-native-reanimated and react-native-gesture-handler, and then removed @react-native-community/masked-view etc. I reverted all changes and it's working again. Commented Jan 10, 2022 at 13:40
  • @oliverwebr I followed your instructions and now I get expo: command not found
    – Sean H
    Commented Feb 14 at 12:04
  • 2
    Well sorry before you do a npm run start you need to install your node_modules again. So npm i && npm run start I meant actually. Best of luck to you @sean-h
    – oliverwebr
    Commented Feb 14 at 15:05

29 Answers 29

57

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.

5
  • In my case, if statement was not necessary but changing the app name in specified folders did the job. Thanks a lot!
    – em_code
    Commented Jun 28, 2021 at 11:34
  • In my case I change my app name in app.json and android/app/src/main/res/values/strings.xml but showing the "Invariant Violation: 'mypreviousappname' has not been registered" So I change the name in MainActivity.java as your example and works. Thanks :) Commented Sep 15, 2021 at 15:41
  • 6
    For me, since I am using expo, I was not able to edit the index.js... are there any other solutions?
    – ums2026
    Commented Dec 30, 2021 at 22:32
  • Making these mistakes and learning everyday. Thanks for this answer. BTW i got this error when i used ios directory from other project and used that in my current project (as that seems to be an easy way to update an older project instead of manually updating everything).
    – Irfan wani
    Commented Nov 10, 2022 at 5:31
  • this is correct. In my case, I changed app.json "name" which was not the same as the project target Commented Oct 26, 2023 at 20:15
19

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];
2
  • Only one that worked for me on iOS, thanks a lot
    – TOPKAT
    Commented Oct 7, 2022 at 15:13
  • I created a copy of a app and just missed this to change . Commented Dec 4, 2023 at 10:10
18

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

0
18

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
1
  • this worked for me, if you're things are looking weird then try doing the above Commented Jan 28 at 16:20
13

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.

0
11

workarounded by:

AppRegistry.registerComponent('main', () => App);
6
  • 3
    Wow what? This did it. Can you please explain more about why this works? Commented Apr 29, 2023 at 14:49
  • I don't know how but this actually worked. Commented Jan 24 at 7:13
  • 2
    In which file ?
    – Sean H
    Commented Feb 14 at 12:25
  • index.js @SeanH Commented Apr 4 at 10:28
  • This kind of answer is not very useful. I see one person answered and other person updated it and even then the file name or none other details are mentioned. Commented May 21 at 11:27
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
1
  • 1
    I had everything installed except react-native-community/masked-view as that wasnt specified when I installed navigation drawer (thats when I started getting the err) but after I installed react-native-community, now all issues are solved. thank you :)
    – user6377312
    Commented Jul 3, 2022 at 12:19
7

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

2
  • 1
    This worked for me. But in 2023 the new install command is npx expo install react-native-reanimated
    – Scott
    Commented Jul 28, 2023 at 14:48
  • 1
    npx expo install react-native-reanimated fixed it for me
    – 0xD1x0n
    Commented Mar 27 at 3:52
5

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

2
  • 2
    Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Mar 8, 2023 at 4:53
  • This answer worked in my case Commented Jul 14, 2023 at 9:22
4

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);
}
2
  • This is perfect and simple, thanks!
    – Samil Abud
    Commented Dec 20, 2023 at 22:10
  • 1
    @SamilAbud Maybe you should try create the your app.json Commented Dec 21, 2023 at 23:03
1

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.

1

import app name from app.json like this:

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

then add appname in registerComponent

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

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.

1

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
1

This error occurs when "main" is not registered correctly in index.js.

You can use registerRootComponent(App); or AppRegistry.registerComponent("main", () => App); which do the same thing.

Most likely, the problem is not with your index.js file. You can test it by trying to build your app with an empty app an see if you get the same error.

import { registerRootComponent } from "expo";
import React from "react";
import { View, Text } from "react-native";

const testApp = () => {
  return (
    <View>
      <Text>Test App</Text>
    </View>
  );
};

registerRootComponent(App);

If this works, it most likely means another error happens before your app gets the change to be registered. In my case, I was using a React library in a React Native project. Removing the import statement solved the issue. I suggest reintroducing each part of your app one at a time and seeing which part breaks it. Or revert to a previous commit when the issue wasn't there and see which library was added to the project.

Expo explains it well here: https://docs.expo.dev/troubleshooting/application-has-not-been-registered/

1

I can fix that inssue with following changes in my projecct, im create a new file called index.ts(im use typescript) and add in this file add:

import { AppRegistry, } from "react-native";
import { registerRootComponent } from "expo";
import App from "./App";

AppRegistry.registerComponent("App", () => App);
registerRootComponent(App);

besides change the "main" field in package.json by index file

{
  "name": "paondees-client-ts",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@eva-design/eva": "^2.2.0",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "@react-navigation/stack": "^6.3.20",
    "@ui-kitten/components": "^5.3.1",
    "expo": "^50.0.5",
    "expo-location": "~16.5.2",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.2",
    "react-native-geolocation": "^1.0.0",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-maps": "1.10.0",
    "react-native-notifications": "^5.1.0",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-vector-icons": "^10.0.3",
    "styled-components": "^6.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "@types/react-native-vector-icons": "^6.4.18",
    "@types/react-navigation": "^3.4.0",
    "@types/styled-components": "^5.1.34",
    "typescript": "^5.1.3"
  },
  "private": true
}

sorry for my english level

1

If all other option above fails, this issue is usually caused by a package throwing an error before the app if fully registered or loaded. Try looking out for the other error accompanying this and uninstall the package where the error is from. Or if not, you can reinstall some packages in your home screen one after the other. This is what worked for me. My own case was the package 'react-native-snap-carousel'. This started throwing errors after i upgraded my expo app from version 49 to 51. I hope this helps.

0

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.

0

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

0

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.

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jun 7, 2022 at 6:56
0

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

0

I resolved this on my project by:

removing node modules

rm -rf node_modules

then reinstalling:

npm install

then in index.js I replaced my import app with:

import { name as app } from "./app.json"

then in index.js I changed the code to:

AppRegistry.registerComponent(app, () => App)

Hope this helps!!

0

Try importing NavigationContainer from @react-navigation/native and enclose all the code within NavigationContainer component. It worked for me!

0

In my case, I solved this by adding ExpoModulesProvider.swift into Xcode Build Phase -> Compile Sources.

add ExpoModulesProvider.swift to Xcode Compile Sources

0

For me, this was due to wrong name used at getMainComponentName() in MainActivity.kt in the android folder (as I was attempting the android device). Search the name it shows in Code editor (like in this case was main which is challenging to search) inside the ios/android directory and ensure it matched with what is being used in the AppRegistery.registerComponent name.

0

I faced this when i updated my app from react-native 0.68.2 to 0.74.4, and the project was ejected from expo when it was at 0.68.2 and because of that in my case I was not missing this.

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

//And pass appName to AppRegistry
AppRegistry.registerComponent(appName, () => App);

or you can add the app name that is in your app.json, package.json, MainActivity.kt and AppDelicate.mm

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

But its recommended that you do use the appName approach

Thanks!

-1

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

2
  • I am using expo because I have windows and can't run Xcode
    – Rolf
    Commented Aug 23, 2023 at 13:24
  • @Rolf, it looks like I could see the log for iOS, can't really help. Commented Aug 25, 2023 at 17:12
-2

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.

-2

The following worked for me:

AppRegistry.registerComponent('main', () => App);
1
  • 1
    This exact answer already exists here, no need to post it again Commented May 9, 2023 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.