Full Screen React Native Android
Hide soft-key and navigation bar with immersive mode
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
Reference the gist and edit the following file.
Then, re-run the application on Android emulator or physical device.
- npx react-native run-android
- npm run android
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.
In such case, use component, and use
setHidden(true) method. Note that this hides status bar in iOS as well.
- Hide Android Navigation Bar in React Native
- Enable fullscreen mode (Android Developers Documentation)
This post was originally posted at 2020–09–24.