Full Screen React Native Android

Hide soft-key and navigation bar with immersive mode

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 sample application running 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.

How-to

Reference the gist and edit the following file.

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

Full screen related code is from Android Developers Documentation. Check for other modes such as Lean back and Immersive in the documentation.

Then, re-run the application on Android emulator or physical device.

- npx react-native run-android
- npm run android

React Native’s Android build running in full screen

Alternative

Even-though 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 the status bar area

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

Source

• Hide Android Navigation Bar in React Native
• Enable fullscreen mode (Android Developers Documentation)

Disclaimer

This post was originally posted at 2020–09–24.