Why Expo can not load the project in react-native app? - react-native

I'm trying to create my first react-native app.
I installed expo XDE then I create a new project in this way :
create-react-native-app firstProj
Then I open it in expo XDE and in terminal by exp firstProj
But I get this warning ; And this is what is displayed in the emulator :
Any help is appreciated.

Click the setting button in the left top, then change the "Host" to "LAN"
Restart your project

Follow the below steps to create a new expo app from command line:
create-react-native-app my-app
cd my-app/
npm start
npm run ios / npm run android
In a alternate way you can try Expo XDE interface to create a app and run in your device. Here is a official document for creating and sharing your app across your device. If you are interested with their CLI you can follow the below steps
npm install exp --global
exp init your-project-name
cd your-project-name
exp start
Please check whether you have missed any of the steps from the above, it might help you to fix the issue. You might have missed exp start command.

It helped the following in my case:
Install Genymotion with VirtualBox
SignUp at Genymotion site
Run Genymotion software and !!!SignIn
Close npm prompt program with project and start it again
npm start (in the npm promt window in the project directory)
Close and start Expo app, scan barcode
I noted that when my application runs successfully IpV addresses are identical
exp://10.0.0.124:19000 and
ipconfig -> IPv4 Address. . . . . . . . . . . : 10.0.0.124

In My Case, I did this.
by Using Expo.
Just make sure the laptop and mobile connection with the same network.
Make sure that you are selected Lan on the expo web tab.
Stop the npm Server Running.
Close the App on Mobile Also.
Then Start npm Again.
Now Scan the QR Code if the project is not listed up in the expo recent open project app already.
Or click on the already available in recent opens project on the expo.
Note if Still not working then try same after clearing the recent open in expo app.
I knew that this answer is too late but May it help someone.

Related

how to open / continue expo project in another device with github

I'm pretty new to the expo and developing a mobile app, currently I'm using expo dan react native
I've built an app with the expo and I want to open it on another laptop, so I use GitHub to commit my work there
on the new laptop I already installed expo, node, vs, etc. i cloned the project and can't start it on my new laptop with "npm start"
it shows error like this
"Cannot determine which native SDK version your project uses because the module expo is not installed"
which I already checked on my cmd with expo --version
TL: DR how do I start the expo on another laptop with GitHub?
I already fixed the issue, the console recommended me to do yarn add expo , i already did the yarn add expo before writing this question and it didnt fix me thats why i thought there is something i need to do other than doing that
so after exploring expo documentation and found nothing , i just tried to do yarn add expo BUT in my cmd , not in my console on vs code
it worked perfectly for me and the strange thing is , i cant debug expo in my phone with LAN connection, which now i have to use tunnel connection for this to work where in my old computer i use the LAN connection perfectly fine
TLDR : do yarn add expo in cmd not in vs code console
Did you already clone your repo to your new machine?
If not you should download your code to your new laptop.
Next you will have to cd to the directory of your app in your terminal.
Afterwards you’ll have to run
expo install
And after this is done you can run the following command (still in your app folder)
expo start

Android simulator is not loading on react-native application (Expo)

After the npm start, when the android simulator is open and running with Pixel3, if I 'click' a (for Android emulator), this error appears and the app does not open on the emulator
Trying to open the project on Android...
Installing Expo on device
-Couldn't start project on Android: Error running adb: Failed to install C:\Users\Atif\.expo\android-apk-cache\Exponent-2.16.1.apk:
Expo Press ? to show a list of all available commands.
|
This download is taking longer than expected. You can also try downloading the clients from the website at https://expo.io/tools
I also tried uninstalling and install again. Also I Tried Opening the emulator then run npm start.
Hope Someone Help me. But for whoever helped me i will appreciate their help. Thanks in Advance !!!
first, turn off AVD , then restart start the system, and open AVD and expo project. it will work mostly. If not delete the previous Pixel3 device , restart the system and take a new device and try.
This is because of access issue to open the emulator. Can you manually start a emulator device open, and check react-native run- android. Hopefully if the app is happy, it will install on the emulator.

Can't run expo error: getaddrinfo ENOTFOUND exp.host

this error appear suddenly after updating expo-cli to version 3.2.3
I can't manage to run the application, it displays error like this when I run expo start / yarn start
Trying to open the project in iOS simulator...
Opening exp://127.0.0.1:19000 in iOS simulator
Expo Press ? to show a list of all available commands.
Fetching the user profile failed
getaddrinfo ENOTFOUND exp.host
even I open expo.host from the browser loading.. I tried using 2 internet providers, change dns, flush dns, etc. still not loaded.
I solved this by deleting all expo related files and folders in my project
.expo and .expo-shared specifically.
when you run expo start, expo will automatically regenerate those files.
Make sure you are connected to the same network as your phone and PC,
you can try signing in and starting the project from your recent development tab on expo client.
if this dosen't work try reomving some devDependencies that you're not really using, then delete the node modules and install afresh.
I was facing the similar issue. It got resolved, as I logged in to the expo in my project folder.
Using expo w, you can check if you are logged-in in expo. and use expo login command to login

React Native white blank screen issue

Always getting white blank screen when running the app on the physical device in android case. Using react-native-navigation can't able to detect the bug please help!
I have created a fresh react-native project and integrated the react-native-navigation library into it and when I am running the app in my physical device by running the command yarn run android it runs but shows blank white screen in android. Once it runs successfully but now it won't.
run react-native start in a separate terminal and then run react-native run-android.
i recently faced two kind of white screen problem
1.always showing white screen (due to bundling..)
solutions is
react-native start
and then
react-native run-android
2.it shows white screen some particular seconds or suddenly always shows white screen in properly working app
due to app cache or traffic
solutions is
Androidmanifest.xml
android:usesCleartextTraffic="true"
If Debug JS Remotely is on then also we see the blank screen. I have recently come across this issue. So check if you are already running Debug JS Remotely. If you are running it already then just stop remote debugging. And it will work.
Running ./gradlew clean on android folder and then uninstalling the app from the phone worked for me.
In my case, was using my Phone to test and develop, and suddenly white screen issue appeared.
The app was not loading at all, no error, no code update only white screen comes up after npx react-native run-android.
My solution was to clear the phone cache as it was loading from cache.
I restarted my phone then cleared all cache and then it worked for me.
Use "react-native init" command for the creating the project as it only build react-native not expo and the other node modules for you and then build for the particular platforms for eg. in my case "react-native run-android" and it works.
There is step-by-step what I do to run app on physical android device:
Open 'android' folder from app folder in IntelliJ
Run in IntelliJ, target: USB device
After .apk finish installing, shift-right click in app folder, run PowerShell, type 'react-native run-android'
After it finish, open app on physical device, shake it to open developer menu, and hit 'Reload'
you can also hold menu button on your device to open developer menu(while app is running)
I also faced same issue in the emulator. So the way I solved it is by going into Android settings - Apps - select the app, and force stop it. Then I tried opening the app again and it worked.
Before I did this, I removed the 'build' folder under /android/app/ and re-ran. Did not work.
One thing that often resolves this problem for me is re-installing your node_modules folder and cleaning your gradle build. You can do this manually, however, if you've run into this problem once or many times, consider running a shell script to automate this process.
Create a file called clean.sh and paste this inside:
echo "Removing node modules from $1 then reinstalling..."
cd $1
rm -rf node_modules
yarn install
echo "Cleaning gradle project..."
cd android
./gradlew clean
cd ..
If using npm, change "yarn" above to "npm".
Put the file above in the parent directory of your project (if your project is located at C:\Users\your.name\projects\project1 put the clean.sh file at C:\Users\your.name\projects\).
To run the script, inside of Git Bash or your Unix terminal run this (make sure to change the name of the directory below to the parent directory of your project):
cd C:/Users/your.name/projects
./clean.sh <project-name>
Now when restarting your app, try also reset the packager's cache.
With yarn:
yarn start --reset-cache
yarn android
With npm:
npx react-native start --reset-cache
npx react-native run-android
In my case I had a metro terminal running from my previous project. closing it and running the new project again solved the issue.
Use react-native-splash-screen. I try many ways to fix this issue but it's not working and i think this is the best way.
For me my wifi was disconnected on my test device.
I had to make sure both my computer running the react packager/server and my device were connected to the same wifi network.
I have recently faced this kind of white screen problem
1.always showing white screen after Release
"npx react-native start"
and then
"npx react-native run-android"
2.it shows white screen some particular seconds or suddenly always shows the white screen in a properly working app
due to app cache or traffic and android Newer version also in some case when you are using API with HTTP instead of HTTPS
The reason is that newer android versions are more secure and they try to restrict HTTP request
solutions are
add this line in path project\android\app\src\main\androidmanifest.xml:
android:usesCleartextTraffic="true"
In my case:
1: I tried npx react-native start to run metro.
2: Then write npx react-native run-android in cmd, there was still a white blank screen.
3: I still faced the same issues, then I always comment on every single component, and automatically, I resolve the error. This is the best technique I ever used.
If you are trying to get it working on a Android device, make sure you have first tried to clear cache for the App, doesn't matter if reinstalled.
Try the other answers only after you have cleared cache.
It can not find its navigation's route. You should check the navigation.

Can't load react-native app with expo app on the cellphone

I have created a React Native app with the npm package bootstrapper, then run the npm start command and everything seems to be right until then.
Now, when I go to the expo app on my cell phone and scan the QR code I always get this message "Something went wrong. Could not load exp://... . Network response timed out".
I'm on windows 10, and both the laptop and the cellphone are on the same wireless network.
I don't know what could be the problem, I followed the tutorial on this link:
https://facebook.github.io/react-native/docs/getting-started.html#content
I hope anyone can help me.
Try using the offline option:
exp start --offline