I just started a new react-native project using react-native init myApp.
Then I started it up cding into the folder and running:
react-native run-ios
The webserver start's up and the simulator also.
When I change the index.ios.js file, for example the welcome text to something else, then hit CMD+R, the simulator refreshes but the new welcome text I inserted doesn't show.
I have tried to run react-native run-ios for every change but also with no success.
I'm on macOsx sierra 10.12.1 and react-native 0.38.0.
The simulator is running ios 10.1
Does anyone have any guess what might be wrong?
Thank you
I had the exactly same version and problem. I finally got it working by deleting the <PREFIX>/var/run/watchman/<USER>-state folder and running watchman version which recreated that folder. If you installed watchman with Homebrew I believe it's /usr/local/var/run/watchman/<USER>-state.
Hope this works for you.
Related
I installed react-native-chart-kit with the svg also and I got an error when I run the app. I have the basic code from the library site
<PieChart
data={data}
width={150}
height={220}
chartConfig={chartConfig}
accessor="population"
backgroundColor="transparent"
paddingLeft="15"
absolute
/>
i guess you need to link it. Run the below and then build your app
react-native link
This worked for me:
yarn add react-native-svg
You don't need to link. Just make sure you have installed react-native-svg and then delete the App, restart the metro bundler and rebuilt the App again. Should work.
I had the exact same problem with react-native-chart-kit's PieChart on ios. I solved it by doing 'pod install' in the ios directory, which installed RNSVG (12.3.0). It all worked fine after that, once I'd recompiled everything via Xcode.
Sometimes it happens when you don't rebuilt your native code after installing react-native-svg,
Just close all the running server and start again as...
npx react-native run-android for android or
npx react-native run-ios for ios
Or, if that doesn't help, open the project in xcode / android studio, clean the project, and rebuild.
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 have a problem when running react-native run-ios on my project.
The IOS emulator launch well.
Then the application start (react-native white splash screen) and immediately after that, it return me to the Iphone home screen.
If I Cmd-Shift-H (with pressing H two times) I saw the app in the background (still with the react-native white splash screen).
When I click on it, it return me to the home screen again.
If I launch the Xcode project and run the app, it work fine and I can navigate in my application.
I've had some troubles with my app before, the IOS version was 'abandoned' and I've installed a lot of modules and changed the name of the project in the mean time, before trying to make it work on IOS.
Then I've decided to create a new project with react-native init myNewProject (because I couldn't figured out how to fix the IOS, something with a workspace not configured) and copy paste my old src and index.ios/android.js inside.
So now Android is still working and IOS is only working if I launch the app from Xcode.
I've tried to reset the emulator but it don't change anything.
I don't have any logs about app crash or something.
The Android app version is working fine.
Any idea ?
Logs
I've put the device logs after running react-native run-ios on a gist
https://gist.github.com/ansmonjol/f6fa1e71a20b944bf67429c57d081165
Additional Information
React Native version: 0.35
Platform: IOS
Operating System: macOS El capitan
Xcode: Version 8.0
I ran into this problem, and solve it:
In my case i install third-party native component in my project and link it using command react-native link <component-name>. Than i have a problem about you wrote:
Running project by Xcode - works fine. Bundling start, after loading dependency graph.
But runnig project by react-native run-ios app hide immediately and bundling not started after loading dependency graph. And not any errors happened.
I tried reinstall all, clean npm cache, react-native upgrade, delete build folder, delete derived data... nothing helped.
I found one way that helped me:
I remove that problem library not manyally from Xcode, but from terminal using command react-native unlink <component-name>. Its way to resolve this problem for me, maybe for you too.
Sorry for my english.
I have some issues with React Packager on Windows
Loading
After loading (long long wait), my application is lauching well on AVD Android. But when i change a file and i reload on my app, i see no change. I can do that 10X and no change. (I'm talking about the welcom react base app and i change index.android.js file so nothing very exotic)
Some times, the change on *.js file are detected and my app update well. When it work, it work all the time until i stop the packager. When it doesn't work, it doesn't working until i restart packager.
So for too work, i have to launch, try, launch, try, launch try until it is ok. As you can see, the loading can take 3min so it's not cool.
I tried to activate, desactivate hot reload but no change.
I don't think it's a network issue because after reboot packager, sometimes i have the old version. So i use --clear-cache option. And when i reload the app in android, i can see that packager catch the request but don't send the good version.
So i've conclued that Packager didn't detect very well the file change.
I know on Windows Watchman does not existe maybe there is a work around !!! If you have a solution for slow loading i'm ok too :-)
Can you help me ?
npm -v react-native : 2.15.1
npm -v : 2.15.1
node -v : v4.4.4
Thank you !!!
I had the same problem with nodejs 4. But when I installed nodejs 6 and make run-android init again the problem is fixed. Try to uninstall node 4 and install node 6.
After deleting .expo and node_modules folders and running yarn install changes detection started working again