`expo start` in development stuck at "Tunnel Connected", QR code is unusable - react-native

I'm currently running a detached expo project in development mode. Whenever I run expo start or npm start in the terminal I get the following logs:
$ expo start
Starting project at /Users/johncd/workspace
Expo DevTools is running at http://localhost:19002
Starting Metro Bundler on port 19001.
Tunnel ready.
Your native app is running at expb675c828acbb437095bc6218883f56bb://192.168.1.12:19000
Logs for your project will appear below. Press Ctrl+C to exit.
The expected results would include a QR code after these logs, but there is none.
When I visit the DevTools at localhost:90002 I see the metro bundler is running on LAN and a QR code is available. However, when I scan this QR code, it results in an error reading "No usable data found".
I've tried checking for a Firewall (System preferences > Privacy > Firewall) but it appears to be turned off.
I have also tried uninstalling and re-installing expo-cli as well as the project and running expo start again but to no avail.
I've tried using npm start and yarn start. I have also tried running the project on a tunnel.
I created a test project using expo init test-project and successfully ran it using expo start, so it seems this issue is only occurring on this project.
I also tried running expo start --clear to clear the cache.
None of these have worked.
Any help is appreciated!
Versions:
"expo": "^33.0.0",
"expo-constants": "^5.0.1",
"expokit": "^33.0.4",
"react": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-unimodules": "^0.4.2",]
Running on OSX

You need to install expo client app first from the appstore, then the qr will be readable.

You need to install Expo Go application from app store.

I didn't see anywhere a mention of what platform you're trying to use (iOS or Android) but at least with iOS I can tell you that QR codes in Expo don't really work correctly anymore. I believe Apple prevented the Expo team from being allowed to serve the bundle through the Expo app anymore. What this means for you is that the workflow you should expect is to connect your phone to the device physically using a cable and serve the bundle through USB. You can also use an emulator and move to the device when it's convenient.

Related

Why does my Expo app run in Expo Go but not as a development build?

I've created a development build of an Expo app using EAS. Previously I would open the app in Expo Go by running npx expo start and scanning the Metro Bundler QR code.
Now, when I try to do the same thing, Expo Go asks whether I want to open the project in Expo Go or as a "Development Build". It works fine in Expo Go, but crashes immediately when I attempt to open the dev build. The error reads:
null is not an object (evaluating '_ReanimatedModule.default.createNode')
This error is suspiciously similar to one that I encountered earlier in development, which I resolved by downgrading to React Native version 0.69.6. I'm also encountering a second error that says "'main' has not been registered", but I suspect this is downstream of the first error.
I have the same issue when I try to run the app with npx expo start --dev-client.
Any ideas why I might be having this problem?
It sounds like you may have run expo prebuild (https://docs.expo.dev/workflow/prebuild/) which removes "main": "node_modules/expo/AppEntry.js", from app.json. Try to create a new expo app and look at it's app.json file.
When you run expo prebuild it changes a few things with your project (see "side effects" in the prebuild docs).
I'm actually working through some issues with that right now too. I thought I had to run prebuild but turns out I didn't have to. Ever since I ran it my app will not load via the dev-client way. I can however switch back to npx expo start (NOT npx expo start --dev-client, see the scripts section of app.json as that is also changed when prebuild is run).
Let me know if you are able to get your app to load after re-adding the main stuff to app.json.
Ps, are you by chance using react-native-google-mobile-ads?

react-native app crashes while I want to run debugger-ui react-native-debbugger

I have started my application and install npm packages using npm install, then as usual I have installed debug version of the application using npx react-native run-android, then started the application with npx react-native start. The works fine until I want to use debugger-ui and debug my application using react-native-debugger or fb-flipper.
The problem occurs when pressing r in the terminal and choosing Debug from the modal that appears on the emulator screen.
This is the error that I'm facing with int he terminal:
And also this one in the React Native Debugger tab in the chrome console:
As I'm using the latest version of react-native-reanimated in this project and have followed the installation instructions in the documentation I have used this command for installing that:
npm install react-native-reanimated#next
I have been looking into documentation and after reading that really carefully I have just figured out that the react-native-reanimated#2 is not going to work with react-native-debugger and you can run debugger-ui the documentation recommended to use facebook flipper another amazing developer tool for react-native apps.

Expo doesn't show Logs

When I run my react-native app I can't see my logs.
The device where I started it doesn't even show up in the list. I tested it with iOS, android and an simulator. Any suggestions?
I use the following expo versions:
"expo": "^40.0.0",
"expo-cli": "3.28.6",
You can override console functions like console.log and that can completely change the way they work, it can also intend to do nothing and just disable the log in these cases just remove the libraries you installed recently or restore your project to the point the console worked then find the problem and fix it.
In my case I was running the app on an emulator on my local machine.
What solved it for me was changing the connection setting from LAN to LOCAL.
Either change it through the expo developer tools or just run expo start --localhost instead of expo start
Change a device name to English!

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.

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.