How to do logging in React Native?

Question

How can I log a variable in React Native, like using console.log when developing for web?

Answer 1

Something that just came out about a month ago is "Create React Native App," an awesome boilerplate that allows you (with minimal effort) to show what your app looks like live on your mobile device (ANY with a camera) using the Expo app. It not only has live updates, but it will allow you to see the console logs in your terminal just like when developing for the web, rather than having to use the browser like we did with React Native before.

You would, of course, have to make a new project with that boilerplate... but if you need to migrate your files over, that shouldn't be a problem. Give it a shot.

Edit: Actually it doesn't even require a camera. I said that for scanning a QR code, but you can also type out something to sync it up with your server, not just a QR code.

Answer 2

Users with Windows and Android Studio:

You're going to find it under Logcat in Android Studio. There are a lot of logging messages that show up here, so it may be easier for you to create a filter for "ReactNativeJS" which will only show your console.log messages that are created inside your react native application.

Answer 3

I prefer to recommend you guys using React Native Debugger. You can download and install it by using this command.

brew update && brew cask install react-native-debugger

or

Just check the link below.

https://github.com/jhen0409/react-native-debugger

Happy Hacking!

Answer 4

Development Time Logging

For development time logging, you can use console.log(). One important thing, if you want to disable logging in production mode, then in Root Js file of app, just assign blank function like this - console.log = {} It will disable whole log publishing throughout app altogether, which actually required in production mode as console.log consumes time.

---

Run Time Logging

In production mode, it is also required to see logs when real users are using your app in real time. This helps in understanding bugs, usage and unwanted cases. There are many 3rd party paid tools available in the market for this. One of them which I've used is by Logentries

The good thing is that Logentries has got React Native Module as well. So, it will take very less time for you to enable Run time logging with your mobile app.

Answer 5

You can do this in 2 methods

1> by using warn

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> By using Alert This is not good each times if it reaches alert then each time pop will be opened so if doing looping means not preferable to use this

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

Answer 6

There is normally two scenarios where we need debugging.

1. When we facing issues related to data and we want to check our data and debugging related to data in that case console.log('data::',data)

   and debug js remotely is the best option.

2. Other case is the UI and styles related issues where we need to check styling of the component in that case react-dev-tools is the best option.

   both of the methods mention here.