Full Screen React Native Android

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

Disclaimer

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hyunbin

Hyunbin

Node.js and web developer using TypeScript. Undergraduate in Seoul National University.