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)

Answer 1

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.

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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