using the npx command to run a react-native project - react-native

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.

Related

npx react-native init hangs without any output

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

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
]

can not install react-native-community/react-native-netinfo

I want to remove "Warning: NetInfo has been extracted from react-native core
and will be removed in a future release.
It can now be installed and imported from '#react-native-community/netinfo'
instead of 'react-native'.
See https://github.com/react-native-community/react-native-netinfo" But when i run command it doesn't work.
npm install --save #react-native-community/netinfo
Because of the # in the name of the package powershell treats it as a variable.
You could fix this by either using cmd.exe or putting the package name in quotes like this: npm install --save "#react-native-community/netinfo"
Actual, #Rik's Answer is correct. i would like to add more..
npm install --save "#react-native-community/netinfo"
run this Command with quotations.
cd android go to your android Project directory
gradlew clean run this to clean your android project
then run either react-native run-android or npx react-native run-android or whatever command you use to start project.

Error while running react-native-app-auth in react-native 0.60

So, I used react-native init [project-name] to create one react-native project. It installed the latest version of native, 0.60. Then I installed react-native-app-auth.
After than I started the metro server using react-native start.
But when I ran react-native run-android, the compiler gave me some errors.
Task :react-native-app-auth:compileDebugJavaWithJavac FAILED
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
I've tried to link it manually using react-native link react-native-app-auth.
Don't have any code. It's just some simple configuration.
I expect it to run smoothly, without any errors.
I am getting error after running react-native run-android
https://gist.github.com/ElavanResu/4555dc94f460681aaf051c2a3852effa
You can try to jetify the node_modules until react-native-app-auth updates his repository making it compatible with RN 0.60.
1) npm install --save-dev jetifier
2) npx jetify
3) npx react-native run-android
4) npx jetify
as said in: https://facebook.github.io/react-native/blog/2019/07/03/version-60#androidx-support