console.log doesn't work with react-native - react-native

I'm starting with react-native and I'm getting this problem: I can't log to bundler metro server.
If I create my application using create-react-native-app, I can do 'console.log' and value are logged to metro bundler (running on port 8081).
But if I create my application with react-native init <project>, this doesn't work. To make console.log work, I need to open Chrome DevTools and set remote debug in application.
So my question is: is there any way to make native code to log in bundler console with console.log? I don't want to work with 'create-react-native-app' because it uses Expo and 'realm' database doesn't support expo.
I've tried with react-native 0.55.4 and 0.56, both in windows and linux.


You can also see the console.log() outputs using these commands:
$ react-native log-android
$ react-native log-ios
Note: It also works to debug native errors, for example when you have a blank screen and metro bundler doesn't show errors neither.
For more information you can check this out


Don't know if I correctly understand your question (because of my english), but you can try this:
Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see
your Android app's logs.
Taken from Using adb logcat for React Native Debugging


You can download React Native Debugger and Open your JS Debugger in development menu. You can see everything into RN Debugger.


I discovered that console.log are omitted from console log if your disable remote debug from the debug menu


On Mac. While on ios simulator Clicked on
Command-d->Stop Debugging
.This made logging work for me.

Related

Flipper: Hermes debugger cannot connect error: "Debugging connection was closed"

I have downloaded and setup flipper desktop on my windows machine and I am able to run all its features properly including react devtools but somehow hermes debugger doesn't work and shows error message "Debugging connection was closed".
I am using react 16.13.1 and react-native 0.63.2 and I am running app on Samasung Galaxy Note 10 device. Tried multiple thigs suggested by people on internet but nothing seems to work.
Please refer below image
Please help me out.

Start your project with this command:
react-native start --host localhost

The change on the code not reflected with React Native

I am developing a simple chat program with react native for learning purpose (not use expo). I made changes with the chat message (along with other code change) and was trying to reload the new message with USB debugging on Android device. But the app persistently shows the old message before change. Here is what I did:
Under android subdir, run .\gradlew clean
close android studio and react-native run-android again
Shake the device and choose reload
The #3 causes the error below:
Is there some module like nodemon for nodejs which picks up the code change nice and easily?

I often get this issue too. In this situation, I turn off the debug mode, and run adb reverse tcp:8081 tcp:8081 && react-native run-android again.

Connect your phone to your wifi, and try this,
Trigger the Developer Menu
Go to Dev Settings > Debug server host & port for device
Set it to <your_pc_ip_address_on_local_wifi>:8081. (If you are on a emulator, set it to localhost:8081)
Restart the app

React Native app crashes without any error log

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

Nuclide React Native: Start Debugging

Trying to use nuclide with atom but I cannot get the debugger to work. I have nuclide installed (v0.243.0). Running on Mac and followed the setup instructions in the docs. I run the RN packager within Nuclide, start the debugger and then run 'react-native run-ios' from terminal and lastly enable chrome debugging.But I cannot find find nuclide command 'Nuclide React Native: Start Debugging'.
https://i.stack.imgur.com/lNV9U.png

React Native debugger support was dropped by [fccd95d]

Debug a react-native application using nuclide

Is there any good document/video that talks about how to debug a react-native application using Nuclide.
Am a newbie. Its my first time app development and first time with React.
I did create the project using react-native init. I don't think i found a BUCK file for me to run and debug my app. I also don't see to get how to view the errors in my JS file. I have to run the simulator to see. I run it using react-native run-ios.
I tried Nuclide->React Native->Start Debugging. Not sure what this is supposed to do.
Sorry if these questions sound silly.

According to this instruction you should:
From the command Palette (Cmd-Shift-P) choose "Nuclide React Native: Start Packager" to start the React Native Server.
Ensure that you are in the root directory of the React Native project, then run the application from the command-line: "$ react-native run-ios" (or choose other existing simulator, for example react-native run-ios --simulator="iPhone4s").
After starting the server, you can prime the React Native Debugger for when the application begins running. From the command Palette (Cmd-Shift-P), launch "Nuclide React Native: Start Debugging".
From the Simulator press Cmd-D (Ctrl-D on Linux). This will bring up the debug options for your application. Select "Debug JS Remotely.
...After you enable debugging from the simulated application, Nuclide will attach to that debugging process automatically, since we primed the Debugger above.

Debug JS in Nuclide is now an option in the dev menu added in React Native version 0.52 December 2017 release.
See This