'React Native Fullscreen

I am trying to create a simple react native application. I need to run the app in fullscreen mode. Is there a way to do this?

I need to remove/hide the bottom buttons. I am doing this for Android devices.

|---------------|
|               |
|    screen     |
|               |
-----------------
|  <|   O  [ ]  |     <--- I need to remove these buttons!
-----------------

screenshot

android react-native

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

I created a package with fullscreen and more.

react-native-system-navigation-bar

Install

yarn add react-native-system-navigation-bar

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

Solution 4:^[4]

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

Solution 5:^[5]

Add this code in your Android Native mainActivity:

    /**
     * For fullscreen mode
     */
    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        if (hasFocus) {
            View decorView = getWindow().getDecorView();
            int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
                    | View.SYSTEM_UI_FLAG_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
            decorView.setSystemUiVisibility(uiOptions);
        }
    }

Like this :

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	YasserKaddour
Solution 2	Cameron
Solution 3	kadiraydinli
Solution 4	Jo E.
Solution 5

'React Native Fullscreen

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]