ChatGPT解决这个技术问题 Extra ChatGPT

React-Native: Application has not been registered error

I am currently going through the React-Native tutorials. I began with the Getting Started tutorial, where I made a new react native project and successfully managed to run the project on my device.

I then started the Props tutorial, I copied the code snippet and tried to run the project again and had the following error message show up on my screen:

https://i.stack.imgur.com/In8Me.png

Can you share your code?

J
Jon Winstanley

I guess it is an error caused by not matching name of project and your registered component.

You have inited project with one name, i.e.

react-native init AwesomeApp

But in your index.ios.js file you register other component

AppRegistry.registerComponent('Bananas', () => Bananas);

When it must be

AppRegistry.registerComponent('AwesomeApp', () => Bananas);

If your component name does match, ensure you don't have any other react-native/node process running in another terminal.


"Bananas" some how works for android. But it doesn't on IOS.
For someone facing same problem even if the component name matches -> Make sure you don't have any other react-native/node process running in another terminal.
from my experience, a system reboot sorted the things... as strange as it sounds.
The tutorial is currently called "AwesomeProject"
and for people wanting Bananas instead of AwesomeApp can change the moduleName:@"AwesemeApp" line in their AppDelegate.m file
A
Afshin Mehrabani

Most of the times the problem is that you have another react-native start (i.e. React Native Packager) server running either on another terminal or another tab of TMUX (if you are using TMUX).

You need to find that process and close it, so after running react-native run-ios for instance, it will establish a new packager server that registered for that specific application.

Just find that process using:

ps aux | grep react-native

find the process id (PID) and kill the packager process using kill command (e.g. kill -9 [PID]). You should find the launchPackager.command app in macOS, not sure about the other operating systems.

Then try to run the run-ios (or android) again. You should be able to see the new path after running the new packager server, e.g.:

Looking for JS files in
   /Users/afshin/Desktop/awesome-app 

It works, even if I run react-native start --port <otherport>, should I run react-native run-<platform> in another way?, thanks
@SebastiánPalma as far as I know, the start command runs the packager server so if you have already compiled your application, there is no need to do the run-<platform>.
R
Raphael Pinel

Modify MainActivity in android/app/src/main/java/com/your-package-name/MainActivity.java like this,

@Override
protected String getMainComponentName() {
    return "Bananas"; // here
}

EXACTLY! that was what exactly my problem was, although instead of modifying this I've modified the AppRegistry.registerComponent to that
what about Ios ?
+1. Makes me wonder why the CLI asks whether I want to give the android/ios version a different name when it will only lead to my project to not working and me having to change it back.
I had modified app.js
Be sure to check also app.json in root folder { "name": "Bananas", "displayName": "The Bananas" }
u
user8637708

My solution is change module name in "AppDelegate.m"

from moduleName:@"AwesomeProject"

to moduleName:@"YourNewProjectName"


This fixed my issue. Thanks!
Worked for me running iOS simulator from React Native!
Yep, that helps me out. An additional hint: If you use XCode, make sure, you have set the right Name to your App-Name (Project -> Target -> DisplayName)
Thank you, it is working
R
Rafael Ferraro

First of all you must start your application:

react-native start

Then, you must set your application name as the first argument of registerComponent.

It works fine.

AppRegistry.registerComponent('YourProjectName', () => YourComponentName);

x
xemasiv

In my case there's this line in MainActivity.java which was missed when I used react-native-rename cli (from NPM)

protected String getMainComponentName() {
    return "AwesomeApp";
}

Obviously ya gotta rename it to your app's name.


m
mperk

Please check your app.json file in project. if there has not line appKey then you must add it

{
  "expo": {
    "sdkVersion": "27.0.0",
    "appKey": "mydojo"
  },
  "name": "mydojo",
  "displayName": "mydojo"
}

Been meddling with this error for the past 24 hours. This fixed my issue. Thanks!
m
mohit arora

In index.js you have the following code:-

import {name as appName} from './app.json'; AppRegistry.registerComponent(appName, () => MyApp);

So if in app.json, name is defined as "AwesomeProject" then make sure it same as the following:-

moduleName in ios/projectName/AppDelegate.m :- moduleName:@"AwesomeProject" component name in android/app/src/main/java/MainActivity.java @Override protected String getMainComponentName() { return "AwesomeProject"; // here }


Thanks, that worked for me after I only changed the app's name in the MainActivity.java for Android and forgot to change it for iOS.
A
Alex Sarnowski

I resolved this by changing the following in the app.json file. It appears the capital letter was throwing this error.

From:

{
  "name": "Nameofmyapp",
  ...
}

To:

{
  "name": "nameofmyapp",
  ...
}

A
Arshid KV

I think the node server is running from another folder. So kill it and run in the current folder.

Find running node server:-

lsof -i :8081

Kill running node server :-

kill -9 <PID>

Eg:-

kill -9 1653

Start node server from current react native folder:-

react-native run-android


l
la5zl0

I had the same problem and for me the root cause was that I ran (react-native start) the packager from another react-native folder (AwesomeApp), while I created another project in an other folder.

Running the packager from the new app's directory solved it.


a
agerxs

This solution worked for me after 2 days of debugging. Change this :

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

to

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

D
Dbl

For me the issue was simple.

Created project a -> everything worked

Created project b -> ran into this error

metro was still running with the work path set to the other application. In my case the solution was as simple as closing the metro process and let it restart


V
Venkat

This can also be due to Root component name starts with lowercase.

Recorrect it or rather create the project once again with a PascalCase name.

e.g. ignite new HelloWord


K
Khemraj Sharma

All the given answers did not work for me.

I had another node process running in another terminal, i closed that command terminal and everything worked as expected.


R
Reyraa

you need to register it in index.android.js / index.ios.js

like this:

'use strict';

import {
    AppRegistry
} from 'react-native';

import app from "./app";

AppRegistry.registerComponent('test', () => app);

B
Babajide M. Moibi

This solved it for me

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

So my index.js file

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('main', () => App);

And my package.json file:

"dependencies": {
    "react": "^16.13.1",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5"
},

a
abpatil

Rather than changing the name in AppRegistry ,

Run react-native init Bananas , this will create react boilerplate code for Bananas project and AppRegistry.registerComponent will automatically point to bananas

AppRegistry.registerComponent('Bananas', () => Bananas);

G
G. Thabit

Non of the solutions worked for me. I had to kill the following process and re ran react-native run-android and it worked.

node ./local-cli/cli.js start


which following processes?
@bigmadwolf node ./local-cli/cli.js start
U
Utsav Chawla

I had the same problem. I was using Windows for creating a react native app for android and was having the same error. Here's what worked.

Navigate to the folder ANDROID in your root.

Create a file with name : local.properties

Open it in editor and write :

sdk.dir = C:\Users\ USERNAME \AppData\Local\Android\sdk

Replace USERNAME with the name of your machine.

Save and run the app normally. That worked for me.


G
Gabriel P.

The issue will also appear when, in index.js, you have named the app differently from the name you gave it for the android/ios package; probably this happened when you've ejected the app. So be sure that when calling AppRegistry.registerComponent('someappname', () => App), someappname is also used for the native packages or viceversa.


S
Shamsul Arefin Sajib

I figured out where the problem was in my case (Windows 10 OS), but It might also help in Linux as well( You might try).

In windows power shell, when you want to run an app(first time after pc boot) by executing the following command,

react-native run-android

It starts a node process/JS server in another console panel, and you don't encounter this error. But, when you want to run another app, you must need to close that already running JS server console panel. And then execute the same command for another app from the power shell, that command will automatically start another new JS server for this app, and you won't encounter this error.

You don't need to close and reopen power shell for running another app, you need to close node console to run another app.


C
Carmine Tambascia

After have read all the above, I have found that there could be another reason for this.

In my case:

react-native-cli: 2.0.1

react-native: 0.60.4

and following structure:

https://i.stack.imgur.com/pWsrh.png

First has to be noted that index.android is not been update in Android Studio when the build run by Metro builder( react-native run-android) so it has to be done manually. Also in Android studio does not "read" the

app.json(created by default together with index.js, that renamed index.android.js):

 {
    "name": "authApp",
    "displayName": "authApp"
 }

and so this like

(in my case)

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

cause the fact that android studio does not know what authApp refer to. I fix for the moment referring to the app name with its string name and not using that import from app.json:

AppRegistry.registerComponent('authApp', () => MyApp);

S
Sergiy Ostrovsky

My issue was that in AndroidManifest.xml and MainActivity.java package names were different. So in manifest I had package=com.companyName.appName and in activity package com.appName


W
Wasi Sadman

In my case i have got a different solution in case any one need

yarn remove react-native-material-dropdown

Install new packages react-native-material-dropdown-v2

yarn add react-native-material-dropdown-v2

Replace react-native-material-dropdown with react-native-material-dropdown-v2 in your code

e.g. import { Dropdown } from 'react-native-material-dropdown' to import { Dropdown } from 'react-native-material-dropdown-v2'

another thing ==========

Open node_modules and then search for react-native-material-textfield open the file and go to src folder Under src you will see affix, helper, label folder - under each folder, there is an index.js open the index.js of the mentioned folders one by one (all 3 folders) and search for the text style: Animated.Text.propTypes.style, and replace it by style: Text.propTypes And import text form react-native like this import { Animated , Text} from 'react-native';


T
Tiavina Mik

If you are with expo, you should not change the moduleName in AppDelegate.m and in getMainComponentName(), the default name by registerRootComponent(App) is "main", so it should be remain "main"


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.
a
amir behrouzi

change name and displayname property in app.json with newer name