thanks in advance your your help; I rather a newbie with RN and Android (i used create-native init to create project).
Issue 1: when i first ctrl+M and choose "Debug JS Remotely" it attempts [http://10.0.2.2:8081/debugger-ui] but hangs indefinitely.
Issue 2. and when I finally give up and instead manually visit [http://localhost:8081/debugger-ui/], I have no way to revert AVD from "white screen of death"..ive tried "Stop Remote JS Bebugging", "Reload" etc....but end of having to use "react-native run-android" to refresh
Issue 3: Once I finally have [http://localhost:8081/debugger-ui/] displaying the desired "Debugger session #0 active" and I go into dev tools --> Sources --> Network --> debuggerWorker.js.....I don't see my folders/files listed. See screenshot.
RN is hard enough without being able to debug!
This solution worked for me:
ctrl+m on your emulator.
click on Dev Settings.
Disable User JS Delta
restart the react native server. (ctrl+c in the terminal and then npm run android)
This is an issue with the of latest version of react-native (0.54).
After some investigation, I found there are two ways to workaround this issue.
Option 1. Downgrade react versions, modify the package.json of your AwesomeProject as below
"dependencies": {
"react": "16.2.0",
"react-native": "0.52.2"
},
Then run these commands:
cd AwesomeProject
rm -rf node_modules android
npm install # this will bring folder node_modules back, with react/react-native of previous version
react-native eject # this will bring folder android back
react-native run-android
Option 2. Turning off Use JS Deltas as mentioned in this issue
But the author did not provide full steps, which led me working out option 1.
Cmd+m in your emulator, and turn off "Use JS Deltas".
Find the termnial window for "Metro Bundler", press Ctrl+c to terminate it, then press the Up arrow to re-run the command for "Metro Bundler", such as /works/StackOverflow/node_modules/react-native/scripts/launchPackager.command ; exit;. (This is an important step).
Now back to Chrome, you can find your source files listed under debuggerWorker.js > localhost:8081.
I was having the same issue , manage to fix it by going setting inside inspect element and enable the javascript
Related
I'm working on an app that was developed by someone else and referred to me for debugging. I downloaded the project from git and now when I install it on my android device using the react-native run-android command and change the codes and save it, nothing happens in the app and I have to reinstall using "react-native run-android" to see the changes. what should I do to see the changes online?
The solution was quite simple. The only thing I had to do was to shake the device and click on "enable hot reloading" in the opened menu.
Try to clean the Gradle and run again. and also check are you able to get developer menu by clicking ctrl/command + m.
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.
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.
React Native app crashing without any error log. No output on "react-native log-android" terminal, no red screen with error, Android emulator just crashes. Tried running with Expo, again crashes with no error
Happens when working with TextInput. I have some ideas how I can fix the code, but want to understand why is app crashing without error log and making debugging much more difficult?
my bug was fixed by deleting the build folder(inside android/app) and running
npx react-native run-android
Run adb logcat
You can find your app name in your package.json, under the name field.
Also when looking for errors specifically dealing with react native, try running
adb logcat | grep 'redbox'
This way you don't have to scan the entire logfile.
Or try the method shown in this article:
Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your Android app's logs.
I was running an Android Project on my Linux PC, then I have made some changes on it in a MacOS PC, and when I git pulled de project back to Linux I faced that crashes
inside the android folder, just run:
./gradlew clean
and then try to run it again.
In case none of these work, don't hesitate to just filter on Warning or Higher as sometimes there will be a low level error that will not be caught by the RN filters.
I was only able to find my issue(s) with the following:
adb logcat '*:W'.
In case react native app crashes without an error message checking the problem in Android Studio's Logcat works perfect. But don't forget to create a filter with your package name.
Open Android Studio
Open Logcat
Click on "Edit Filter Configuration" in the right top of the logcat screen
Fill in your criteria (don't forget package name)
Run you react native project on an android device or emulator
This may be because SOLoader is absent.
Ensure
implementation'com.facebook.soloader:soloader:0.9.0+'
is added under dependencies in android/app/build.gradlle
clean your build
cd android
./gradlew clean
Try bundling
./gradlew bundleRelease
Exit android folder
cd ../
Try running
npx react-native run-android --variant=release
My app kept crashing because I had changed the name of the app in a few places. Make sure your app name is the same everywhere.
Check if the folder name in
android/app/src/main/java/com/<appname>
has the same name as that of your app in manifest file in
android/app/src/main/
My RN App works correctly before, suddenly one day it does not work, keeps crashing without error log. All I have to do is: delete build and .gradle folder under android folder, then run again, it works. Hope it may help someone.
this worked for me
run react-native start --reset-cache
after this if app throws some import error kill the task and run react-native start or npm start normally and open the app.
Deleting my node_modules, reinstalling them and run
npx react-native run-android
fixed it for me
While running your Android Emulator for debugging also run
Android Studio -> Tools -> Android -> Android Device Monitor
It will tell you exactly what is crashing the app under LogCat tab.
two easy steps solved my problem...
open android studio and remove offline bundle from src/main/assest..(** if any)
open MainApplication.java and remove the following import..
import com.facebook.react.BuildConfig
I had the same issue, maybe you made the same mistakes i did.
Make sure u didn't change the app's package name (ex: com.myapp.app).
I lost a lot of time on this. Seems like someone else published a app with the same name on google play, and i didnt change it correctly in each place i should on mine.
Anyway, if that is not your problem, it is probably in something u changed in build.gradle or other config file, try to remember where u last changed something.
Was having this issue on Windows 10
What fixed it for me in the end was:
delete C:\Users\%userprofile%\.gradle\caches
deleteyour-react-app/android folder completely - then 'Discard Changes' in git so you get the original files back
re-run npx react-native start and npx react-native run-android
A tip, my emulator api version was 32. And my targetSdkVersion was 31.
I created another emulator which api level is 31 and the error is gone.
Well first of all, does it crashes when it opens or does it crash at a specific screen? Mine crashed because I did not put my text inside <Text></Text> inside the TouchableOpacity
a very simple solution for me.
delete this file -> gradle-wrapper.properties
and run android folder with android studio.
In case you tried any of the given suggestions and none worked, use Android Studio to run the app in debug mode and then watch logs at the debug console.
For me, it was a styling rule error. I did
paddingTop: Platform.OS === 'ios' && 50 which caused the app to exit immediately on Android.
The debug console log I got was E/unknown:ViewManager: Error while updating prop paddingTop
To correct that, I did paddingTop: Platform.OS === 'ios' ? 150 : 0
Delete Your node modules
Then run npm install
after this run
for window
gradlew clean
for macOS
./gradlew clean
then run
npx react-natie run-android --variant-release
or
npx react-natie run-android
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.