React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap, etc.
In this article, we will learn about logging in React Native.
Logging: It is a quick and easy way to debug your application in development phase. It helps to get an insight into the functioning of the application. To perform logging, we can simply use the console.log() statements to log the required information or indicators.
Note: Remove these console.log() statements before we push our product into the development phase as these statements will simply create an overhead there.
This can be done using two functions
- console.log
- console.warn
- react-native-logs
To learn more about logging, let’s create a react-native application:
To create a React-Native App, we will use the Expo CLI version that will much smoother to run your React Native applications.
Expo: It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.
Below is the step-by-step implementation of the above approach.
Step 1: Open your terminal and run the below command.
npm install -g expo-cli
Step 2: Now expo-cli is globally installed, so you can create the project folder by running the below command.
expo init "projectName"
Step 3: Now go into the created folder and start the server by using the following command.
cd "projectName"
Step 4: Install dependency
npm install --save react-native-logs
Project Structure: It will look like the following:
Example 1: In this example, we will display a message on terminal using console.log
Syntax:
console.log("content")
Javascript
import React from 'react'; import { Text, View } from 'react-native'; export default function App() { console.log("App executed"); return ( <View > <Text style={{ color: 'green', fontWeight: 'bold', fontSize: '30px' }}> neveropen </Text> <Text> Logging in React Native </Text> </View> ); } |
Output:
Explanation: Using console.log() method, one can do logging in console. As you can see from above example, “App executed”, is getting logged in the console.
Example 2: In this example, we will do logging using console.warn. This function performs logging in a yellow box.
Syntax:
console.warn("content")
Javascript
import React from 'react'; import { Text, View } from 'react-native'; export default function App() { console.warn("Hi Geek!! Lets code together!"); return ( <View > <Text style={{ color: 'green', fontWeight: 'bold', fontSize: '30px' }}> neveropen </Text> <Text> Logging in React Native using console.warn </Text> </View> ); } |
Output:
Explanation: As you can see a warning in yellow color, in this way we can do logging using console.warn.
“Hi Geek!! Let’s code together! “ is getting logged in a yellow box in console
Example 3: In this example, we will do logging using a dependency called react-native-logs.
This dependency helps to provide some styling to logs. It has 4 forms; debug, info, warn and error
These forms can be seen in the below example
Javascript
import React from 'react'; import { Text, View } from 'react-native'; import { logger } from 'react-native-logs'; export default function App() { var log = logger.createLogger(); log.debug('I am a Debug log'); log.info('I am a Info log'); log.warn('I am a Warning log'); log.error('I am a Error log'); return ( <View> <Text style={{ color: 'green', fontWeight: 'bold', fontSize: '30px' }}> neveropen </Text> <Text> Logging in React Native using react-native-logs </Text> </View> ); } |
Output:
