DEV Community

Adding Notch support to your React Native apps: Android, iOS & Web

Bruno Lemos on September 01, 2019

In this tutorial we'll learn how to properly support notches (aka “display cutout”) on Android, iOS and Web with just a few lines of code. Here's ...

Read full post

ph0ph0 • Nov 16 '19 • Edited

Thanks very much for the tutorial Bruno!

Please can you provide some more information on the part where you add the onCreate() method to the MainActivity class? I have added the code that you suggested and it is riddled with errors.

I have an error on the Override statement "Method does not override method from its superclass".

An error on onCreate(Bundle...) "Method onCreate(Bundle) is never used"

And an error on super.onCreate(savedInstanceState) "onCreate(android.os.Bundle) in ReactActivity cannot be applied to Bundle"

I'm not an android dev, so finding it difficult to debug this myself. Thanks a lot!

Max Thirouin • Oct 2 '19

We may need to import import android.view.WindowManager; in MainActivity.java

Aman Mittal • Sep 4 '19

Thank you so much for sharing a cross-platform solution for this problem. I was wondering the SafeArea insets would have to be added to every screen in the app (assuming that app contains multiple screens). Is there anyway to do provide a context or something and wrap around the main component such that all other screen components do not have to be defined explicitly?

Also, does the package react-native-safe-area-context works with Expo apps?

Aman Mittal • Sep 4 '19

Nevermind, I found this: github.com/react-native-community/... :)

Aditya Suman • Mar 11 '21 • Edited

Thanks a lot for this <3

android/app/src/main/java/{...}/MainActivity.java
MainActivity.java =>

Edit* => I have removed these two lines -
// getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

and used "react-native-immersive" to hide statusbar & navigation bar. (i.e. immersive mode)
Link to react-native-immersive - npmjs.com/package/react-native-imm...

/* MainActivity Code below */

package com.testapp;
import com.facebook.react.ReactActivity;
import android.view.WindowManager;
import android.os.Build;
import android.os.Bundle;

public class MainActivity extends ReactActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
layoutParams.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
getWindow().setAttributes(layoutParams);
}
super.onCreate(savedInstanceState);
}

@Override
protected String getMainComponentName() {
return "testapp";
}

}

MBakhtiyor • Jan 28 '20

We may need to import:

import android.view.WindowManager;
import android.os.Build;
import android.os.Bundle;

in MainActivity.java

martipello • Dec 15 '20

So Chris banes created a library to do this called inserter also flutter handles this by wrapping layouts in something called a safe area, the more you know 😉

orteidni • Aug 17 '20

Hello! Thanks for the great article. How can I get this working with the Modal component? When using a Modal, the notch space is filled again like by default.