React Native landscape mode - display over notch

Question

I've started learning react native, and I created some simple landscape application, my issue is that the app doesn't display past the notch, which I'd want it to. I managed to solve it on portrait mode with:

<style name="ActivityTheme">
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

But since my app is only on landscape, this doesn't really help me and doesn't work on landscape mode. I assume since it's not related to the StatusBar anymore when on landscape.

I'm using View and not SafeAreaView, so that shouldn't ignore the notch as far as I know. An example of what it looks like on the phone(xiaomi redmi note 9 pro, android 11):

Couldn't find any solution on google/docs, so hopefully someone here could help me. Thanks.

score 0 · Answer 1 · answered Sep 09 '22 at 07:49

0

Have you try using https://reactnative.dev/docs/safeareaview hope it work. Safeareaview in my case can fix my problem.

And if not work try use React-Native-Responsive-Dimension

answered Sep 09 '22 at 07:49

zidniryi

1,212
3
15
36

score 0 · Answer 2 · edited Aug 25 '23 at 08:04

After researching this issue a bit I saw that the notch mentioned in this issue is actually the camera notch and it is different than the status and system bars. That's why it is not affected by most of the solutions for entering full-screen.

The way I managed to fix this issue was by going through these answers - Fullscreen App With DisplayCutout

I implemented this piece of code into my react native module logic

getCurrentActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
getCurrentActivity().getWindow().getAttributes().layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;

This is how it looked my Fullscreen.js module

import android.view.View;
import android.view.WindowManager;
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
                    );

                    getCurrentActivity().getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
                    getCurrentActivity().getWindow().getAttributes().layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
                }
            }
        );

    }

    @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);
    }
}

Depending on how your application logic works, you can also implement these properties in your theme, as stated in the issue I mentioned above.

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

React Native landscape mode - display over notch

2 Answers2