While reading a news article or playing games in apps, you often get distracted by unwanted notifications. In that case, you might have looked for an option where you can maximize the app screen to the device screen. This is what is known as the Immersive Mode interface. It is the full-screen mode enabling you to enjoy the complete user experience.

With React Native app development service, you can embed a full-screen interface in your React Native apps. Let’s see what are the prior-needed learnings that you should be familiar with before designing the codebase of this project.

What is the pre-acquired knowledge needed?

First of all, you have to set up your dev system. This means that you have to download  Node.js, Visual Studio Code editor, Android Studio, and other software required to get compatible with the React Native background.  This is similar to setting the background before starting with a new framework. If you have already worked on this cross-platform app development framework. You must have gone through this process.

Next, you have to learn the process of building a simple ‘Hello World’ app using React Native framework.  The current project is about rendering an Immersive Mode interface in an app. So, you should get a fair idea of how a  simple React Native is built. If you are looking for a reliable source,

Now let us see which third-party React Native library, you will need to get the Immersive mode in your app.

Consideration of react-native-android-immersive-mode

One of the foremost reasons behind the increasing popularity of React Native as a cross-platform app development framework is due to its third-party library support. If you are developing an app using  React Native CLI, you can get a specific set of components that you may need for your project. For this, you don’t have to burden the app and increase its size with unnecessary resources. This is what the third-party library provides.

Note that, you cannot get these benefits if you are using Expo CLI.

For this project, you will require react-native-android-immersive-mode. With this, you can get the immersiveModeOn and immersiveModeOff. Also, you have to check the version of React Native that you are working on. Here, I am working on the 0.68.1 version of React Native. This is needed because, if you are working on a version less than 0.60, you have to consider the auto-inking process to get the third-party package.  This may become a  complicated task for you.

Since I am using a newer version of React Native, I only have to run the command npm install react-native-immersive-mode –save on my project terminal.

Now, let’s see the code syntax for this Immersive mode interface. For the current project, you have to create two folders App.js and ImmersiveMode.js.

Framing the codebase of the ImmersiveMode.js folder

First of all, get a Component folder in your root directory. Now, you have to create a file: ImmersiveMode in the Component folder.

Then let’s find what code syntax will hold.

Import all the React Native components that you will require. Here, we will also import immersiveModeOn and immersiveModeOff from react-native-android-immersive-mode. Given below is the syntax that you have to use.

import {View, Text, AppState, Button, StatusBar} from ‘react-native’;

import React, {useEffect, useState} from ‘react’;

import {

  immersiveModeOn,

  immersiveModeOff,

} from ‘react-native-android-immersive-mode’;

Now, you need to introduce an ImmersiveMode function. For this, you have to consider the syntax const ImmersiveMode = () => {. Later on, in the App.js folder, you have to use this ImmersiveMode function to toggle the Immersive mode on or off. Further, in this ImmersiveMode.js folder, you have to export the ImmersiveMode function. This will allow you to call this function in the App.js folder.

Use the syntax: const [isImmersiveMode, setImmersiveMode] = useState(false); to set the initial value of the isImmersiveMode variable to false. You can use the setImmersiveMode to update the value of this variable later in the process.

Going forward,  use the JS-based if/else statement to switch on the immersive mode if the user’s device is in immersive mode. Or else, the code will direct you to switch off the Immersive mode. For this, refer to the below-provided syntax.

useEffect(() => {

    if (isImmersiveMode) {

      immersiveModeOn();

    } else {

      immersiveModeOff();

    }

As you can notice, I have wrapped the if/else syntax under the useEffect hook.

It’s time to add the Button component along with some props such as onPress.

With the syntax:

<View style={{flex: 1, justifyContent: ‘center’, alignItems: ‘center’}}>

      <StatusBar backgroundColor={‘red’} />

      <Button

        onPress={() => setImmersiveMode(!isImmersiveMode)}

        title=”Toggle ImmersiveMode”

      />

    </View>

Here, I have added the <View> component. Different parameters of styling such as flex, justifyContent, and alignItems are added. Using the onPress prop, you can call the setImmersiveMode. The Button has the title “Toggle ImmersiveMode”.

As we have built the ImmersiveMode.js file, we have to proceed with creating the App.js folder.

Adding the ImmersiveMode  component in the App.js folder

This will need a few lines of coding where you have to import the necessary components and use the ImmersiveMode component from the ./components/ImmersiveMode.

So, get started.

I have created the codebase of the App.js folder with the below-given syntax.

import {View, Text, StyleSheet} from ‘react-native’;

import React from ‘react’;

import ImmersiveMode from ‘./components/ImmersiveMode’;

Besides the core components of React Native, you have to import the ImmersiveMode.

Introducing an App function, you have to return the <ImmersiveMode /> component.  Consider the following syntax for this.

const App = () => {

  return <ImmersiveMode />;

};

Also, you have to add the line export default App; at the end.

Now, we have to test the app on the emulator.

Running the app on the virtual device

Open a new terminal from your project folder. You can do this in the code editor. Pass npm install and then npx react-native run-android. Wait for some time till the emulator does not start. As soon as it starts, you can find the emulator as given in below image.

You can click the button ‘TOGGLE IMMERSIVEMODE’ to turn the immersive mode on. It will disappear both the navigation and the red status bar from the app screen.

After practicing the codebase and running the same on your device, you can create different apps with immersive doe already built in them.