React Native app "full screen" in new cellphones

Question

My goal is to make an app full screen with the status bar visible in Android and in IPhone, like in Expo but in React Native

Here is what is happening:

My goal is to remove this gray part and make the app occupy this part and at the same time show the status bar, like in Expo.

I already tried this: https://reactnative.dev/docs/statusbar.html#sethidden

But all the gray top became black and without status bar

I already tried add this to styles.xml in Android:

<item name="android:windowFullscreen">true</item>

But changed nothing (and will work just in Android)

score 8 · Answer 1 · answered Aug 01 '20 at 04:30

Out of the box option.

import React, { Component } from 'react';
import { StatusBar } from 'react-native';

class MyComponent extends Component {

    componentDidMount() {
       StatusBar.setHidden(true);
    }
}

or another way is to use true Immersive mode in android. Either you can go for native approach or find any RN modules that does this.

score 1 · Answer 2 · edited Sep 15 '20 at 11:19

1

You can use StatusBar to set those options as follows:

import { StatusBar } from 'react-native';

export default function App() {
    React.useEffect(() => {
      StatusBar.setBackgroundColor('#FF573300'); 
      StatusBar.setTranslucent(true)
     }, []);

     return(...);
}

The last zeros in the color code indicates the opacity

edited Sep 15 '20 at 11:19

Lomefin

1,173
12
43

answered Sep 14 '20 at 14:46

Ignacio Cieza

11
1

Welcome to Stack Overflow. Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what this code does and how it answers the question, so that it is useful to the OP as well as other users with similar issues. – FluffyKitten Sep 15 '20 at 01:37

score 0 · Answer 3 · answered Feb 01 '21 at 06:18

If it only android.

1- Create FullScreenModule.java and FullScreenPackage.java and put them under android/app/main/java/com/Your-App-Name

// FullScreenModule.java

package com.your-app-name;
import android.view.View;
import android.app.Activity;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.UiThreadUtil;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;


public class FullScreenModule extends ReactContextBaseJavaModule {
    @Override
    public String getName() {
        return "FullScreen";
    }

    @ReactMethod
    public void enable() {
        UiThreadUtil.runOnUiThread(
            new Runnable() {
                @Override
                public void run() {
                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE |
                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION |
                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
                        View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
                        View.SYSTEM_UI_FLAG_FULLSCREEN |
                        View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY
                    );
                }
            }
        );

    }

    @ReactMethod
    public void disable() {
        UiThreadUtil.runOnUiThread(
            new Runnable() {
                @Override
                public void run() {
                    getCurrentActivity().getWindow().getDecorView().setSystemUiVisibility(
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    );
                }
            }
        );

    }

    FullScreenModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
}

And FullScreenPackage.java

// FullScreenPackage.java

package com.your-app-name;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class FullScreenPackage implements ReactPackage {

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(
                              ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new FullScreenModule(reactContext));

    return modules;
  }

}

Next in your MainApplication.java put those

import com.your-app-name.FullScreenPackage;

and add the package under getPackages() packages.add(new FullScreenPackage());

lastly create fullScrean.{js or tsx} file somewhere that containe

import {NativeModules} from 'react-native';
module.exports = NativeModules.FullScreen;

Now import the module import FullScreen from './fullScrean';

and then simple FullScreen.enable() / FullScreen.disable() should work for you.

score 0 · Answer 4 · answered Jul 25 '21 at 05:58

Use react-native-fullscreen-chz

yarn add react-native-fullscreen-chz

import FullScreenAndroid from 'react-native-fullscreen-chz'

FullScreenAndroid.enable();

Styles.xml

android\app\src\main\res\values\styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
        <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
            <item name="android:textColor">#000000</item>
    
             <!-- Add this line for notched devices. -->
            <item name="android:windowLayoutInDisplayCutoutMode" tools:ignore="NewApi">shortEdges</item> 
        </style>
    </resources>

more info : react-native-fullscreen-chz

Bhavya Koshiya · Answer 5 · 2022-12-23T04:56:58.053

Add this code in your Android Native mainActivity onCreate Method

    /**
     * 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

React Native app "full screen" in new cellphones

5 Answers5

Use react-native-fullscreen-chz

Styles.xml

android\app\src\main\res\values\styles.xml