Logging in React Native

Logging is a quick and simple way to debug your application during the development phase. It helps developers understand how the application is functioning and identify issues easily. In React Native, logging allows you to track values, errors, and warnings while the app is running.

• We can use console.log() to print general information and debug values.
• console.warn() is used to display warning messages that indicate potential problems.
• Libraries like react-native-logs provide advanced logging features for better debugging and log management.

Note: Remove these console.log() statements before we push our product into the development phase as these statements will simply create an overhead there.

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.

1. 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.

2. For iOS users, simply scan the QR code using the Camera app.

3. 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: Here, 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:

• 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: Now, 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:

• 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: Now, 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: