Adding Notch support to your React Native apps: Android, iOS & Web
Tags: reactnative, react, android, tutorial
Published: 2019-09-01 00:48:12

---
title: Adding Notch support to your React Native apps: Android, iOS & Web
published: true
description: Notches (or Display Cutout) are more common each day, and you can support it with just a few lines of code
cover_image: https://thepracticaldev.s3.amazonaws.com/i/0l8e80kjqiluj7h46ni8.png
tags: react-native, react, android, tutorial
---

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 our Android Emulator showing a `Double cutout`:

![Android Emulator with Notches at the top and bottom](https://thepracticaldev.s3.amazonaws.com/i/43d6q5g8xat0c80mzzl0.png)

> If you don't have an Android device with Notch, open an Android Emulator and emulate the display cutout by going to `Android Settings > System > Advanced > Developer options > Display cutout > Double cutout`

You can see in the screenshot above that the wallpaper shows behind the notch. That is the correct behavior and your app should do it too.


But let's see what happens when we render a simple app:

![black-bars-around-app](https://thepracticaldev.s3.amazonaws.com/i/x0kes5ij335w3anar4w4.png)

By default, the app does not handle the notches. You can see in the image above that it rendered two black bars, making the screen feel smaller to the user. That is not good, let's fix that.

Here the fun starts. After researching and trying different methods for hours, I found out this is what you need to add to your `MainActivity.java`:

```diff
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);
+            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
+            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+        }
+
+        super.onCreate(savedInstanceState);
+    }
```

This code does three things: set `layoutInDisplayCutoutMode` to `edgeInsets` to stop showing the black bars, and set both `status` and `navigation` to `translucent` to render our app behind the notch and navigation buttons.

Here's the result after adding this code:

![content-render-behing-notch](https://thepracticaldev.s3.amazonaws.com/i/cr974dpqm5zku2k7uzkd.png)

Yes! That is an improvement. Now we use the whole screen. But you can see the text content is being hidden by the notches. 

React Native has a built-in component called [SafeAreaView](https://facebook.github.io/react-native/docs/safeareaview). It fixes this exact issue, but... only on iPhone X. It still doesn't have Android support.

Thanks to [@janicduplessis](https://twitter.com/janicduplessis), we can use [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context), that supports all platforms we want: iOS, Android and Web!

> If you use Expo, this lib will be included on SDK v35

> If you use react-native < 0.60, you can apply [this patch](https://gist.github.com/brunolemos/ec886065b695d54ba25af7de47475c90#file-react-native-safe-area-context-0-3-5-patch) using [patch-package](https://github.com/ds300/patch-package)

The api looks like this:

```jsx
const safeAreaInsets = useSafeArea()
```

And we add the paddings to the `View`:

```jsx
<View
  style={{
    flex: 1,
    paddingTop: safeAreaInsets.top,
    paddingBottom: safeAreaInsets.bottom,
    paddingLeft: safeAreaInsets.left,
    paddingRight: safeAreaInsets.right,
  }}
>
```

And here's the final result:

![text-rendered-correctly](https://thepracticaldev.s3.amazonaws.com/i/bttzd6occxsuxnz7skdd.png)
 
It works perfectly 🎉🎉🎉 
Android is ready, now let's see how our iOS app is looking:

![iPhone X rendering correctly](https://thepracticaldev.s3.amazonaws.com/i/iu1l559zbtxig483pf5u.png)

iOS is already perfect as well! 🎉 
That's 2 out of 3. How about web? Let's see:

![screenshot-mobile-safari-black-bars](https://thepracticaldev.s3.amazonaws.com/i/h3wc0zcbizv5nteeqosy.png)

Hum, web is still showing the black bars. 

> If your app doesn’t support web yet, check out my other tutorial: [How to share code between iOS, Android & Web using React Native, react-native-web and monorepo](https://dev.to/brunolemos/tutorial-100-code-sharing-between-ios-android--web-using-react-native-web-andmonorepo-4pej)

But that is easy to fix, you just need to add `viewport-fit=cover` to your `viewport` meta tag:

```diff
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```


![screenshot-mobile-safari-showing-correctly](https://thepracticaldev.s3.amazonaws.com/i/u3cg890xnzb3grah5tpf.png)


And voilà! Our app now properly supports notches on iOS, Android and Web! And again, it was this easy thanks to the awesome  [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context).

Here's the [gist](https://gist.github.com/brunolemos/ec886065b695d54ba25af7de47475c90) with the code above, the [tweet](https://twitter.com/brunolemos/status/1167963091167895552?s=20) in case you want to retweet and my Twitter account: [@brunolemos](https://twitter.com/brunolemos) 💚


Thanks for reading!