React Native Fullscreen

If you are using Expo on your project then simply add the following to your app.json file:

{
  "expo": {
    ...
    "androidNavigationBar": {
      "visible": "immersive"
    }
    ...
  }
}

The app.json file is your go-to place for configuring parts of your app that don't belong in code. It is located at the root of your project next to your package.json. For more info about the app.json file visit here: https://docs.expo.io/workflow/configuration/

The androidNavigationBar is the configuration for the bottom navigation bar on Android. Setting it to immersive results in the navigation bar being hidden until the user swipes up from the edge where the navigation bar is hidden. For more info about the androidNavigationBar option visit here: https://docs.expo.io/versions/latest/config/app/#androidnavigationbar

I created a package with fullscreen and more.

react-native-system-navigation-bar

Install

yarn add react-native-system-navigation-bar

or

npm install react-native-system-navigation-bar

Links

https://www.npmjs.com/package/react-native-system-navigation-bar

https://github.com/kadiraydinli/react-native-system-navigation-bar

React Native doesn't provide a way to hide the android navigation bar directly, you would have to create a native module that use the Android Immersive mode introduced in Android 4.4 or use an existing module that do just that, and I found only one: react-native-full-screen

In your project's android manifest file, select fullScreen activity.