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:
This question is related to
javascript
facebook
reactjs
react-native
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
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
This solution worked for me after 2 days of debugging. Change this :
AppRegistry.registerComponent('AppName', () => App);
to
AppRegistry.registerComponent('main', () => App);
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.
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"
},
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.
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:
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);
Modify MainActivity
like this,
@Override
protected String getMainComponentName() {
return "Bananas"; // here
}
My solution is change module name in "AppDelegate.m"
from
moduleName:@"AwesomeProject"
to
moduleName:@"YourNewProjectName"
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);
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",
...
}
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);
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.
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
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
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.
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);
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.
sdk.dir = C:\Users\ USERNAME \AppData\Local\Android\sdk
Save and run the app normally. That worked for me.
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 ==========
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
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"
}
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.
Source: Stackoverflow.com