Red Error Screen when build first project in React - react-native

Today I start to learn about React. After install React by some command in Terminal, I use react-native MyFirstProject to create my first project, and in my Android Studio emulator get a red error screen like this:
Error Screen
I tried to resolve follow there command but still have no idea what I am doing? Can someone explain for me how to fix it? Thank you.

To fix open a new terminal,go to your project folder and run
npm install
after installation complete
npm start
What “npm start” does is start your react package manager, read more about it in details here
https://github.com/rnpm/rnpm
Also run the command,
This is quite a useful tool during development.
adb reverse tcp:8081 tcp:8081
And last Reload.
For android one can use CTRL + R For apple one can use R + R (two
times R).

Looks you didn't install babel, babel module is not existion the the node_module.
npm install babel then npm start
If it doesn't work. You can try npm start --reset-cache
Hope it help.

Related

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.]

Error while running the existing React Native project

So I'm opening my the existing React Native project. This is the procedure on how I opened my existing React Native project. 1st step, type the location of my project which is in the "D:\rnprojects\firstproject\". 2nd step, "react-native-start". 3rd step, I opened another cmd then locate it again into my project directory then typed "npm start".
Why when I created this project I didn't get this error just when runnning/opening my existing project.
This the error that I got: (with versions)
There is only simple steps can solve your particular scenario issue quickly.
1) Install the React native cli in your project or globally.
npm install -g react-native-cli
OR
npm install react-native --save
then start your project by using this command
npm start
If any dependencies issue please follow the second solution
2) Please make sure you're installed all dependence
yarn install
OR
npm install
under your project directory
I'm pretty sure your issue will fix by using 1st solution Thanks.
it is simple:
1.npm install
2.react-native run-android
Here I guess you have the RN environment to run already on your side.
cd path_to_project
install packages(there are two following ways to install packages).
2.1 yarn install
2.2 npm install
react-native link(optional - you need to run this command if existing project use RN packages which need to link such as
react-native-vector-icons)
optional(if project use pods) cd ios pod install
react-native run-ios or react-native run-android according to the platform which you want to run on.
I don't think above is perfect instruction give you how to run the existing react-native project, But I am pleasure if give me some hints or help to you.
You can find official guide here
Sometimes npm's cache gets confused and need to reset it by using below command:
npm cache clean --force
Also try below command:
npm install --save-dev react-native-cli
Hope it will help you.

React Native Failed to load bundle

I'm getting the following error:
I have already tried "babel-preset-react-native": "4.0.0"
and npm install and clean cache and deleting node modules.
I have the same issue as you. I tried this:
Close Metro Bundle
Back to terminal
npm start your app directory
Go to simulator and press Cmd + R
It works for me, I hope it helps you.

eslint with yarn and create-react-native-app

Has anyone made eslint work with create-react-native-app in vscode on Windows 10? It is so unstable it's making my skin itch!
Latest npm doesn't work with create-react-native-app so I installed yarn. Now I can create an app. But I have to do this with cmd prompt outside of vscode otherwise I get no QR code to launch app on my phone.
I tried to install eslint locally with yarn, and use airbnb linting rules - this fails - if I install it with npm it works and I can initialise it with airbnb rules. Yay! I now have linting in my project.....but wait! Now I cannot start my project anymore because:
react-native-scripts start
'react-native-scripts' is not recognized as an internal or external command,
operable program or batch file.
This is killing me!! It's taken about 8 hours of $%^#ing around and I haven't even got to try any react native coding yet! Is it supposed to be this insane just to set up the environment?!!?
Anyone have any suggestions? I googled and looked at github issues but I see no solutions for this.
Thanks in advance!
Version 1.5.2 of create-react-app has options for using npm instead of Yarn as well as using a specific npm version. Use create-react-app -h to view help.
Have you also tried adding the following to your VS Code settings when using Yarn?
"eslint.packageManager": "yarn"

Windows & Android: react native server crashes very often

ERROR EPERM: operation not permitted, lstat '...\.idea\workspace.xml___jb_old___'
{"errno":-4048,"code":"EPERM","syscall":"lstat","path":"...\.idea\\workspace.xml___jb_old___"}
Error: EPERM: operation not permitted, lstat 'app\.idea\workspace.xml___jb_old___'
at Error (native)
After that I should again do:
npm start
How to resolve this quite annoying problem?
Thanks
Solution:
How to fix the file permissions, after loading end
react-native start
First, Go to android folder
cd android
Now clean the project...
gradlew clean //for Mac users, change gradlew to ./gradlew
Now run the build process again in the root folder
cd ..
react-native run-android
I think it's the problem of 'save write', I am using Webstorm, uncheck "File->Settings->System Settings->sychronization->use safe write" to see if it helps you.
Basically it looks like windows bug on react packager. When you disable Hot Reloading, it should be stopped. If not, can you try "npm cache clean" before run "react-native run-android", please? Also you can try to run on administrator. If these are not working, maybe it's about Antivirus app.
Also can you add ".idea" folder to your github ignore file to try? And are you trying to run it from Webstorm (or any eclipse-based platform) directly or terminal?
Closing SourceTree did the trick for me. Once I pushed my changes to the repository also crashed server (I suppose GitKraken has the same effect).
The best temporary fix I found for this was that when you do react-native run-android, look out for the React Package Manager and as soon as it opens, close it and wait until the progress of react-native run-android says BUILD SUCCEEDED and then open another cmd in the same Directory of your react-native project and do npm start. If the server crashes again or you get any error, you can just do npm start again and continue your work.
One of the cause can be if any of npm server(cmd terminal window) whether it is your project's sever or other project then close it and now you will not get this error
I am currently experimenting with expo and I am finding this behaviour whenever I try to edit files.
The mentioned solution by #user6795391 worked for me however at some point the setting in Webstorm changed to Back up files before saving
https://www.jetbrains.com/help/webstorm/system-settings.html
Obviously please consider the implications of disabling this!
use
$ react-native start
І hope it works