React Native STUCK starting packager - react-native

For some reason when I want to start my React Native project, it's stucks at 'Starting Packager...' part. I tried to delete the node packages, and reinstall them, intall them via yarn, npm, but no luck. I got no idea how should I fix this :/ (so awkward)

I had the same issue. I solved it by changing react-native-scripts version from "^1.14.1" to "1.14.0" and run npm install again.

after a long search I found a solution for this problem:
this problem is caused by another watchman process, to solve it you have to turn off the watchman process
first,check react,react-native,and expo version are they compatible, goto here
Then you must install watchman, goto https://facebook.github.io/watchman/docs/install.html.
Check watchman has installed by:
watchman -v
result:
4.9.4
After that, type in terminal or cmd:
watchman watch-del-all
result:
{
"version": "4.9.4",
"roots": [
"C:/Users/***/Documents/Project/quickCountAndroidCrna"
]
}
look in the "roots" section:
"roots": [
"C:/Users/***/Documents/Project/quickCountAndroidCrna"
]
if "roots" not empty, you must shutdown watchman process, typing this in terminal or cmd:
watchman shutdown-server
result:
{
"version": "4.9.4",
"shutdown-server": true
}
run again watchman watch-del-all
you will get result with empty roots like this:
{
"version": "4.9.4",
"roots": []
}
after that you can run npm start or yarn start or other command to start your react-native project.
if the problem still occurs, repeat the above method several times, make sure the "roots" are empty! in my case, even I had to repeat it up to 3 times.

There could be multiple reasons for the issue. For the most recent version of react-native (Aug 2018), what you might need to do is just press 'q', it will displays the QR code.
After that, you use the expo app scan the QR code, it should start to bundle the scripts and load it to your phone.
If not, you might have another issue which is caused by the incompatibility among React-Native, React and Expo. If you are using Expo 27, you should use reactive-native 0.55.
There is a complete matrix here, https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Anyone who face problem after running
npm audit fix, that is because it will try to install react-native 0.56 which doesn't work with Expo 27 well. So don't run npm audit fix. Just run npm install react-native#0.55.0. (As time progress, the version might be different. Make sure you follow the link above to find out the compatible versions.)

There's a fastest way that worked for me:
When it says "Starting packager..."
press the "q" key. To show QR code

In my case (React Native 0.62.2) however, yarn ios equivalent to react-native run-ios was stuck (silently) as the dedicated port (8081) was reserved by previously running process.
I only found that out when I tried running yarn startequivalent to react-native start
I had to kill it kill -9 $(lsof -t -i:8081 -sTCP:LISTEN) and run yarn ios to get ios simulator back and running.
Every case is different and I Hope this helps someone.

Related

Watchman Version Showing 0.0.0. Preventing npm start on React Native App

I am trying to develop a react native application on MacOS, but I have been running into issues with installing watchman onto the machine. I have been running the command brew install watchman and whenever I enter the command watchman version the output displays version: 0.0.0. However, directly after running the first installation command over again, I see Warning: watchman 2022.06.06.00 is already installed and up-to-date which is really confusing me.
I have tried various different troubleshooting techniques such as uninstalling and reinstalling watchman, instead of using brew I attempted using sudo port install watchman with MacPorts, removing the .watchmanconfig file and re-creating it, and lastly restarting my device, but none of these solutions have seemed to work for me.
Whenever, I open my react native project and run the command npm start, this is the output that I see,
jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
...
watchmanResponse: {
error: 'std::__1::system_error: open: /Users/USER/Desktop/ReactNativeApp: Operation not permitted',
version: '0.0.0'
}
This error message ends the npm start and because of this, I am unable to run npm run ios and continue with the development of the application. If anyone happens to know of any fixes or has experienced this before I would appreciate it if you share how I can resolve it. Thank you.
We can resolved this when we put our project outside from those folder Desktop,Download and Document
then run
npm start
It will be work
thanks

React Native - Module AppRegistry is not a registered callable module

I get error Module AppRegistry is not a registered callable module whenever I upgrade above react-native 0.61.5. Once I downgrade back to 0.61.5 it works fine again.
UPDATE 11/14/20
I tried the answer killall -9 node but I get the error bash: killall: command not found. This is likely a very rookie mistake where I need to install something or run command from different path
UPDATE 12/28/20 - in response to #dhruv soni.....below is my index.js file where AppRegistry.registerComponent is called:
UPDATE 01/23/21 - I used "React Native Upgrade Helper" to upgrade...triple checked everything is correct.
Issue only occurs on Android (not IOS)....but it builds fine on Android Studio...error only occurs with react-native run-android.
I use very many 3rd party libraries so Im guessing its related to that
Fixed the issue on my end by double checking that i modified all the files correctly during my RN upgrade, then running watchman watch-del-all, and react-native start --reset-cache. Then on android, build -> clean. then it worked! sigh
Specific solution of your question
I found a wrong initialization of appContainer. you can fix as below
const AppContainer = createAppContainer(SignedInTabNav);
class App extends React.Component {
render() {
return <AppContainer />;
}
}
export default App;
I can be wrong but in my case, this happens every time whenever I install new npm package and maybe not sure but I face this only with iOS, so each time whenever I face this issue I follow these steps.
killall -9 node
delete package-lock.json
delete node_module folder
delete pods folder
delete pod-lock file.
npm i
npm pod-install ios
npm start --reset-cache
react-native run-ios
Kill all node process and start the server and run the application
Run command killall node
Run taskkill /f /im node.exe if the process still persists
Run command yarn start --reset-cache
Run command react-native run-ios OR react-native run-android
I see now why noone could answer this....
I had to comment out nearly all code in my app...piece by piece until the error stopped occuring.
The naughty line of code was import {GiftedChat, Bubble} from 'react-native-gifted-chat'
Seems there is some kind of conflict between my upgraded version of RN and RNGiftedChat
"react-native": "0.63.3",
"react-native-gifted-chat": "^0.16.3",
Can "fix" bug by either:
downgrade RN
or
Remove/replace react-native-gifted-chat.
.....however dont really want to do either.
...not really sure where to go from here

expo always returning me with "-bash: expo: command not found" everytime i go to set up a project, "expo init projectname". how do i resolve this?

have downloaded latest version of node.js on mac
terminal says ive downloaded latest version of expo cli
if i try to run my first project in terminal; expo init project name, am always met with the same error. -bash: expo: command not found.
when i check terminal to make sure that expo is installed, i am also met with: -bash: expo: command not found.
i have spent at least 3 days trying to resolve this problem.
any help towards this resolution would be greatly appreciated
How have you downloaded the Expo CLI? It may be important to note that if you don't install the package globally, like npm install -g expo-cli, it may not be properly executable.
[Additionally, One thing I've found when installing commands is that it can help to restart your terminal. Sometimes after you've installed something new, not everything will be in place, but it might be there when the terminal restarts.]

React Native version mismatch

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.
Getting the following message when I init a new project and then launch the Xcode emulator:
React-Native Version Mismatch
Javascript Version 0.50.1
Native version: 0.50.0
Make sure you have rebuilt the native code. ...
Does anyone know what is going on here and can help me?
This is what I've done with it:
Close all terminals and run build again.
You may forget to close nodejs terminal from another project, and they happen to have installed different react version.
So the code fetches from nodejs server conflicts with the native one.
In case you created your react-native app using create-react-native-app. You should have a app.json (expo). and a package.json file, check if the expo versions match and change accordingly. For example in my case the problem was that in the app.json file I had a 25.0.0 version for the expo sdkVersion attribute, I change that to 23.0.0 and everything worked.
package.json:
"dependencies": {
"expo": "^23.0.4",
"react": "16.0.0",
"react-native": "^0.50.4"
}
app.json:
{
"expo": {
"sdkVersion": "23.0.0" // before was 25.0.0
}
}
Just go to your android/app/build.gradle and then add to the dependencies section:
dependencies{
compile ("com.facebook.react:react-native:0.50.3") { force = true }
}
/// the react native version can be found in package.json
For Android developers who couldn't get it fixed by just closing and rebuilding, Manually uninstall the app on the emulator/device.
just force react native version in your android's app level gradle file, in the dependencies section.
compile ("com.facebook.react:react-native:0.52.0") { force = true }
worked for me
If you're running your React Native app through Expo, upgrading React Native is liable to cause this error (as noted at https://github.com/expo/expo/issues/923).
If that's your scenario, your options are:
Bump Expo (which is listed in your package.json) to a version that is compatible with your React Native version (if one exists, which may not be the case - judging by the linked issue, I figure that Expo support trails React Native releases).
Discard your changes, delete and reinstall your Node modules, Eject from Expo, and then (after checking that you can still run your app post-ejection) try your upgrade again.
I've never seen this error before, but whenever I can't get Xcode and React-Native to play well together, I do a couple of things. Check what version of Xcode I'm working with. If it needs to be updated, I update it. Then clearing watchman and the cache are the second place I go. I don't use the reset cache command. It always says that I need to verify the cache, so I skip that (you can do it though, I just get confused). I use rm -rf $TMPDIR/react-* to get rid of any cached builds. If that doesn't work, I try to build the app in Xcode, then work my way from there, to build it with react-native run-ios. With this error message, it seems you might start by trying to build it with Xcode. Hope that helps...let me know your progress with it. Good luck! (Also, you could update to RN 0.51 as another attempt to get your versions synced.)
I had this problem for the longest time and none of the above solutions helped. I was in the middle of upgrading react native in a create-react-native-app project until I found out that not all versions of Expo support the latest React Native.
Found this page linked in the documentation that shows which version combinations of React Native, React, and Expo are officially supported:
Source: https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
Editing the app.json and package.json files to match the corresponding versions and running npm install got everything working again.
I am using a physical device, in my case this solved the problem:
Uninstall the app
lsof -i :8081
kill -9 PID
Rebuild the app (react-native run-android or react-native run-ios)
In your build.gradle file add the following
implementation ("com.facebook.react:react-native:0.51.0") {
force = true;
}
replace 0.51.0 with the version in your package.json
Try installing the dependencies again. That worked for me-
1.) yarn/npm install
2.) yarn/npm start --reset-cache
For me it was due to react-native version in dependency section of package.json file. It was:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "~0.55.0"
}
I chaged it to:
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-native": "0.52.0"
}
Now it works fine.
In my case installing a new virtual device helped. Now I am using 1 device per app.
It happens sometimes when you try to run without closing the node server, in which the previous app was running, so try restarting React.To do so, just run the following commands:
1. To kill current processes
killall node -9
2. To Start React Native
react-native start
3. Then Run android
react-native run-android
For my case I'm facing it on iOS, and I've tried to reset and clear all cache using below command but failed too, despite many comments saying that the root cause is there is react packager running somewhere accidentally, I've restarted my mac and the problem still remained.
watchman watch-del-all && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start --reset-cache
The solution is, to delete the build folder # /ios/build, then execute react-native run-ios solved it
I have tried the solutions above but adding this to AndroidManifest.xml seems to fix it.
android:usesCleartextTraffic="true"
For others with the same problem on iOS with CocoaPods:
I tried all of the solutions above, without luck. I have some packages with native dependencies in my project, and some of those needed pod modules being installed. The problem was that React was specified in my Podfile, but the React pod didn't automatically get upgraded by using react-native-git-upgrade.
The fix is to upgrade all installed pods, by running cd ios && pod install.
Expo users - make sure your app.json sdk version and package.json expo version are (may be equal) compatible to each other.
The fix we did was to make sure the ANDROID_HOME and PATH variables were set up prior to the build.
First, run the below two commands then the build the app for the device.
export ANDROID_HOME=/Users/username/MyFiles/applications/androidsdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
This is working for me :
react-native start --reset-cache
I also had this issue using Expo and iOS Simulator. What worked for me was erasing the Simulator in Hardware > Erase All Content and Settings...
I have got the same issue while building my react native app for android and I did the following which worked for me.
The "JavaScript version 0.50.1" in the error console is the react-native version in your package.json file. Make sure it is the same version as "Native version 0.50.0" in the error console.
I have Updated the react-native version to the "Native Version 0.50.0" as prompted in the error console.
Rebuild the app react-native run-android.
Possible Fix:
Delete the package-lock.json
Run: watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-map-react-native-packager-* && rm -rf node_modules/&& npm install
If the problem persists, try to execute the project directly from the Xcode
This worked for me.
In my case (NOT using expo & Android build)
package.json
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.2"
}
And app.json
{
"sdkVersion": "27"
}
resolved the issue
I was trying to build and run a React Native app from WebStorm and ran into this problem. The simple solution for me was:
watchman watch-del-all
On macOS, if watchman is not already installed, install it using Homebrew:
brew install watchman
In my case, I changed the expo version manually. I got the same issue because I forgot to update sdkVersion in app.json and babel-preset-expo in package.json
After that run: expo r -c to clear cache and start the app.
This Answer is Published in 2020,
Fix this Error in 3 steps:
First step: I changed the value of expo in package.json file to the latest supported version, according to expo documents(visit here).
Second step: I changed the value of sdkVersion in app.json file to the same value of expo in package.json.( equal number to last step).
Third step : I changed the value of react-native in package.json file to the same value of React Native Version , according to expo documents(visit here).
now your ready to go.
use npm install to install specified version of dependencies and then npm start to run the project
I got this classing when TypeScript type definitions mismatched.
E.G react-native at 0.61.5 in dependencies and #types/react-native at 0.60.0 in devDependencies.
As soon as I updated devDependencies it worked. Didn't have to restart anything.
edit your package.json for your javascript version
"react-native": "^0.50.1",
after run
npm install
For me, who is running with a monorepo, there was a hidden react-native version inside yarn.lock. It was not present in any package.json, but was never deleted.
I removed that particular react-native version from yarn.lock, and did a
yarn install
This cleaned out alot of old stuff and made sure that things was working fine.

React Native 0.45 - Cannot find entry file index.ios.js

I just updated my react native project to version 0.45
and when using this command : react-native run-ios on the root of this project
I am getting this error :
Cannot find entry file index.ios.js in any of the roots ....
and i can see that the server is trying to look for JS files in
Looking for JS files in
/Users/someUser/Code/ReactTest/node_modules/react-native/packager
when using this command : npm run start -- --root .
i can see that the server is looking for js file in the correct location
Looking for JS files in
/Users/someUser/Code/ReactTest
and every thing is working from here
why the react-native run-ios is try to look in the wrong location ?
I ran into this issue today. As noted here it has been corrected as of version 0.45.1, but this turned out to be a red herring for me.
The most telling problem in my case was that index.ios.js didn't actually exist anywhere in my project, only in some places in node_modules. It turns out that, because I'd initialised the project with the create-react-native-app command, I had to:
npm run eject
You can read more about the eject command here.
If you still have issues, try the below.
Check your dependency versions. Here are my RN packages:
"react": "16.0.0-alpha.12"
"react-test-renderer": "16.0.0-alpha.12"
"react-native": "^0.45.1"
Update your dependency managers. These worked for me:
$ yarn --version
0.18.1
$ npm --version
4.6.1
Clean your cache(s). WARNING - CONTAINS rm -rf, COPY WITH CARE.
watchman watch-del-all
rm -rf ./node_modules
yarn cache clean
rm -rf $TMPDIR/react-*
yarn install
npm start -- --reset-cache
After that last npm start, hit CTRL+C and ensure there are no dormant npm processes running in the background. Then, try react-native run-ios again.
The react-native launched new release 0.45 a few days back. So, the commands to create a react-native application and running locally have many differences.
npm install -g create-react-native-app
Then run the following commands to create a new React Native project called "AwesomeProject":
the new way of creating a react-native application as follows
create-react-native-app AwesomeProject
cd AwesomeProject
npm start
Please follow the official documentation for creating an application and running the application on locally. hope the below link will help you.
https://facebook.github.io/react-native/docs/getting-started.html
Once you've set these up, you can launch your app on an Android Virtual Device by running npm run android, or on the iOS Simulator by running npm run ios(macOS only).
Enjoy, Happy coding :)