Write a native module to enable full-screen mode in React Native (Android)

here are instances where a screen needs to be in full-screen mode to utilize the maximum usage of screen space or to avoid users exiting the app accidentally. However, React Native does not come with a built-in solution to enter or exit full-screen mode, hide the system navigation bars, or hide the system status bar.

I have seen some developers using some modules like react-native-immersive to enable full-screen immersive modes, but I thought this would be a great opportunity to write my first native module and bridge it to React Native.

I recommend going through the “Toast Example” provided in React Native docs to understand how bridging the platform API to JS works.

Now let’s start with the android’s docs on how to enable full screen mode. After a quick read, I realize it uses [setSystemUiVisibility() ]from View class along with system UI flags such as SYSTEM_UI_FLAG_LAYOUT_STABLE,SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION, SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN, SYSTEM_UI_FLAG_HIDE_NAVIGATION SYSTEM_UI_FLAG_FULLSCREEN, etc.

Let's create a new file FullScreenModule.java inside android/app/src/main/java/com/your-app-name/ and use the function setSystemUiVisibility() as mentioned in the android docs.

// FullScreenModule.java

package com.yourappname;
import android.view.View;
import android.app.Activity;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.UiThreadUtil;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;


public class FullScreenModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
        return "FullScreen";
    }

    @ReactMethod
    public void enable() {
        UiThreadUtil.runOnUiThread(
            new Runnable() {
                @Override
                public void run() {
                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                        View.SYSTEM_UI_FLAG_FULLSCREEN |
                        View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                    );
                }
            }
        );

    }

    @ReactMethod
    public void disable() {
        UiThreadUtil.runOnUiThread(
            new Runnable() {
                @Override
                public void run() {
                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    );
                }
            }
        );

    }

    FullScreenModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
}

The next step is to register the module using createNativeModules(). Create a file FullScreenPackage.java inside android/app/src/main/java/com/your-app-name/ with these contents:

// FullScreenPackage.java

package com.yourappname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class FullScreenPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new FullScreenModule(reactContext));

    return modules;
  }

}

Now link the FullScreenPackage to getPackages() inside MainApplication.java:

// MainApplication.java
............import com.appname.FullScreenPackage; // add package Name............
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();  // ... add the next line
  packages.add(new FullScreenPackage());
  return packages;
}

The final step is to wrap the native module in JavaScript. Create a new file called FullScreen.js:

// FullScreen.jsimport {NativeModules} from 'react-native';
module.exports = NativeModules.FullScreen;

Now you can enable or disable FullScreen:

import FullScreen from "../utils/FullScreen";FullScreen.enable();
FullScreen.disable();