CODEWITHSUNDEEP
androidreact-native
Ythalo Rossy
Ythalo Rossy

Reputation: 500

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

Upvotes: 14

Views: 41877

Answers (5)

Bhavya Koshiya
Bhavya Koshiya

Reputation: 1806

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 :

Like this

Upvotes: 1

kadiraydinli
kadiraydinli

Reputation: 206

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

Upvotes: 4

Joe
Joe

Reputation: 8292

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

Upvotes: 10

Pravin Ghorle
Pravin Ghorle

Reputation: 690

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

Upvotes: 4

YasserKaddour
YasserKaddour

Reputation: 930

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

Upvotes: 12

Related Questions