Full Screen React Native Android Build

by Parosa | 2020-09-24

By default, React Native’s Android build shows both the Status bar and the Android navigation bar. There are several ways to hide these elements and make the Android build full-screen.

React Native's Default Sample App on Android

Instead of using external package such as react-native-full-screen, this guide focuses on changing the MainActivity.java file inside the React Native project’s android folder.

Since it only changes the Android build setting, it does not affect the iOS build.

Steps

1. Open the Following File.

android\app\src\main\java\com\app\MainActivity.java

package com.app;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.
    */
    @Override
    protected String getMainComponentName() {
        return "app";
    }
}

2. Add Import

...

import com.facebook.react.ReactActivity;

import android.os.Bundle;
import android.view.View;

...

3. Add Fullscreen Setting

The Following Java Code is copied from Android Developers Documentation. Check for other modes such as Lean back and Immersive in the documentation.

...

public class MainActivity extends ReactActivity {
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            hideSystemUI();
        }
    }

    private void hideSystemUI() {
        // Enables regular immersive mode.
        // For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
        // Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_IMMERSIVE
                // Set the content to appear under the system bars so that the
                // content doesn't resize when the system bars hide and show.
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                // Hide the nav bar and status bar
                | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_FULLSCREEN);
    }

    // Shows the system bars by removing all the flags
    // except for the ones that make the content appear under the system bars.
    private void showSystemUI() {
        View decorView = getWindow().getDecorView();
        decorView.setSystemUiVisibility(
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
    }

    ...

    @Override
    protected String getMainComponentName() {
        return "app";
    }
}

4. (Re)Run App

`$ npx react-native run-android` (or `$ npm run android`)

React Native's Android Build Running in Fullscreen

Alternative?

Eventhough the Android status bar is hidden, react-native does not know about it. Therefore, certain elements(e.g. Modal’s backdrop) does not extend to the status bar area. Using react-native-extra-dimensions-android is advised by react-native-modal, but this might not fix the issue.

React Native's Modal Background Not Extending to Status Bar Area

In such case, use StatusBar component, and use setHidden(true) method. Note that this hides status bar in iOS as well.

import { StatusBar } from 'react-native';
StatusBar.setHidden(true);

Source