npx react-native init hangs without any output - react-native

I want to create a new react-native project using this command in the terminal of visual studio :
npx react-native init project-name
But the terminal freezes for 10 minutes in this line
⸨⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠇ rollbackFailedOptional: verb npm-session e582ffa365b35dcf
Screenshot
I've tried these solutions but none of them worked for me.
When I tried npx create-react-app teachat, it worked very well. I got confused if the problem is related to npm or react-native.

For these reasons it could occure.
1.network connectivity: some times your internet connection is okay but some applications may interfere when downloading dependency. In this case, try using a different network.
Try removing react-native-cli from global installation with this npm uninstall -g react-native-cli
3.Try different version or typescript template
npx react-native init projectname --version X.XX.X or npx react-native init AwesomeTSProject --template react-native-template-typescript

The react native cli is a deprecated method of creating react native projects,the init method is the one currently in use. Check under Creating a new application the official docs
Uninstall react-native-cli and use the same command as you did npx react-native init projectname

Related

I want to start with react native without expo method.. i found this error

I got this error when i am trying to run my app in original device, everything according to react-native documentation
Try running your app with the yarn command, otherwise run npm-doctor to make sure all your packages are updated and fixed.
otherwise try installing dependencies for expo using :
npm install -g yarn
yarn add global react-native
yarn add global react-native-cli
react-native init sample
here's a quick link to the npm-doctor documentation:
https://docs.npmjs.com/cli-commands/doctor.html
Also here's some tutorial on running react-native app using yarn command:
How do I create a React Native project using Yarn?
I find this solution .. i just replace 6.2 with 6.3
in android/gradle/ gradle-wrapper.properties
distributionUrl=https://services.gradle.org/distributions/gradle-6.3-all.zip

using the npx command to run a react-native project

Previously, when I had tried using react-native we were told to use react-native run-ios to run the project from the command line. Now, the instructions say to use npx react-native run-ios from the command line.
What in the benefit of using npx. Does using npx change how the project is compiled? If I sometimes use npx and sometimes neglect to use it will it mess anything up in my project?
Check this answer more about of npx
react-native supported and recommended to use npx start from react-native#0.60.0.
The benefit of using npx is don't need to install react-native-cli tools globally. Check the below example of using npx and not for the react-native project.
### Using npx ###
﹩ npx react-native init <SimpleProjectName>
### Without using npx ###
﹩ npm i -g react-native-cli
﹩ react-native init <SimpleProjectName>
Both react-native-cli and npx react-native are should not use in one project. The official docs said before starting a new project:
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.

Why sould one init a react-native project with npx?

Today I tried to do things differently, and launched a react-native project with npx, and went into troubleshooting issues like react-native command not found, are you sure this is an android project, etc. while things were easier with expo and react-native init.
So I'm wondering, according to you, what are the advantages, what does npx more ?
npm:
npm create-react-app my-app executes the local create-react-app package from your machine, so you first have to install it globally on your system with npm install -g create-react-app.
npx:
If you run npx create-react-app my-app and don’t have create-react-app globally on your system, it will get downloaded and not installed globally.
As you are getting "react-native command not found", first make sure to have react-native cli installed globally. For that,
npm i -g react-native-cli
Then create your react-native project.

Cannot run program "npx": error=2, No such file or directory when running React Native app

I have been working with react-native project in another pc and it has been working correctly. Now I cloned project to another device where I have react-native installed since I work with other project and I cannot run it.
When I run react-native run-android I get this error:
Cannot run program "npx": error=2, No such file or directory
I'm using Android Studio 4 on Mac OS Catalina 10.15.6.
I solved the problem by running Android Studio with bellow command on console.
$ open -a "Android Studio.app"
Simple steps you need to go through to make it work with npx
sudo npm uninstall -g react-native-cli
sudo npm i -g npx
npx react-native run-android
More detailed explanation why this is happenig
Issue was that Facebook is not using anymore react-native-cli as they are using npx.
As stated in Facebook page:
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues.
So i had to run sudo npm uninstall -g react-native-cli to remove react-native-cli
They also say that npx is shipped with nodejs but that wasn't my case.
React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js.
So I had to install it using sudo npm i -g npx
After installing npx then just need to run npx react-native run-android.
Be aware of npx before react-native run-android
Now you don't have any command react-native now we only have 'npx' and react-native run-android is just a parameter for npx. For ex. to start metro we should run npx react-native start
I had the same issues, so I followed these steps:
Start by installing the latest version of Android Studio (Don't delete the old version, just copy paste that to another directory or in my case I just added the Android Studio 3.2.1 that I had to a folder called olderAndroidStudio, on mac).
Make sure you don't click on import settings from Existing.
Follow along the installation, and complete it.
Build and Run, app runs without any problems.
I additionally uninstalled react-native-cli using the method given in the accepted answer.
In my case, I just quit Android Studio and reopened, and the error was gone.
Maybe throw in a ./gradlew clean for goo measure.
I solved it by finding the command that was throwing error and ran it directly
node -e "console.log(require('react-native/cli').bin)"
which outputs a path, something like
$HOME/my-app/node_modules/#react-native-community/cli/build/bin.js
then I pasted that path in android/app/build.gradle
project.ext.react = [
entryFile: "index.js",
enableHermes: true, // clean and rebuild if changing
cliPath: "$HOME/my-app/node_modules/#react-native-community/cli/build/bin.js" // <--- add this
]

The development server returned response error code: 500 in basic application in react native

I am Android Developer, I am new to react native development. For this, I followed bellow React Native Document
https://facebook.github.io/react-native/docs/getting-started.html
I did the following steps
1, I have installed node
2, I Have already installed JDK
3, I have installed Android studio
4, set the ANDROID_HOME path in environment variables
And in command prompt, I did run the following commands
npm install -g react-native-cli
Then create a new application, for this
react-native init AwesomeProject
Then successfully created the application, then go to that folder and run the application.
cd AwesomeProject
react-native run-android
Then getting the following error
And this is the node js error
So please help me, Thanks In Advance.
Try to follow the workarounds here : https://github.com/facebook/react-native/issues/4968.
Kill the bundler process, delete your modules folder, run npm install, rm -rf $TMPDIR/metro-cache-*, also rebuild your android project.
If this doesn't work, you can as well try to create your app using create-react-app toolchain which should be working fine : https://github.com/facebook/create-react-app .
This is a bug within Windows environment for React Native 0.56 you may need to upgrade/downgrade your React Native version. I encountered it, made even worse when I tried to use Typescript.
What I would is run a new project using the latest version 0.57 and just build, if it doesn't build straight away - then use 0.55 until the issue is resolved.
Try this solution, it was worked for me.
Steps to create New React Native project:
react-native init projectName (ProjectName: eg.HelloWorld)
cd HelloWorld
npm start
Open another node command prompt and goto the project path and then run your project with below given command.
react-native run-android
I think you missed 3rd step i.e to start npm.
And if you are again getting same error, follow these steps:
rm -rf node_modules && npm install
rm -rf /tmp/metro-bundler-cache-*
rm -rf /tmp/haste-map-react-native-packager-*
react-native run-android