How to perform logging in React Native ?

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, which 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.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For the Physical Device, download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Example 1: In this example, we will display a message on the terminal using console.log.

Syntax:

console.log("content")

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: 30 
            }}>
                GeeksforGeeks
            </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")

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: 30 
            }}>
                GeeksforGeeks
            </Text>
            <Text>
                Logging in React Native using console.warn
            </Text>
        </View>
    );
}

Output:

Explanation of the above Program: 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 the 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 example below.

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: 30
			}}> 
				GeeksforGeeks 
			</Text> 
			
			<Text> 
				Logging in React Native 
				using react-native-logs 
			</Text> 
		</View> 
	); 
} 

Output: