Breaking Scope

Using SafeAreaView with iPhone X and React Native

I’m probably a little bit late to the party but I finally saw an iPhone X in the wild for the first time the other day so it got me thinking a bit about making sure my apps are actually compatible with the new screen notch(and lack of physical buttons too I guess). React Native actually makes working around the iPhone X pretty easy with a component called SafeAreaView. It’s included by default in the react-native package, but there are some caveats and I will talk about them more below.

Using SafeAreaView with iPhone X

SafeAreaView is pretty self-explanatory, it gives you a ‘safe area’ that isn’t covered by the black notch at the top of the iPhone X, and also doesn’t interfere with the changes in design for the bottom of the screen. It’s really easy to use as well. Here’s what a new project looks like without SafeAreaView(keep in mind I removed the container centering for clarity):

React Native and SafeAreaView

Without SafeAreaView

And here’s what the same layout looks like wrapped in SafeAreaView:

React Native and SafeAreaView

With SafeAreaView

The JSX markup is pretty straightforward too, here’s what the final App.js file looks like:

What are the caveats then?

Nothing major, but it seems like the SafeAreaView bundled with React Native by default is an older version of a package created by react-community. The updated react-community version includes a prop called forceInsets that lets you hide specific insets(top, bottom). I had a situation where I wanted the top inset but not the bottom inset, so the react-community version was more useful for me. The forceInsets prop doesn’t seem to work with the standard React Native SafeAreaView as of v0.52.1.

Wrap Up

If you want to make sure your React Native apps are compatible with the iPhone X I suggest trying out SafeAreaView – it’s definitely very easy to use. I also wrote an article last week about tweeting on React Native without using any extra libraries, you can read it here. As always, if you have any questions feel free to write them in the comments below.

2 Comments

  1. how do we blend the safeViewArea with header and status bar, i see wierd seperation on top and bottom with shadow as seperator.

    • jordan_mohi

      Hey Srinivas,

      It’s probably best to just set an appropriate background color for the SafeAreaView portion. In one of my apps I chose to not display the bottom part of the SafeAreaView and then just set a specific background color for the top that blended in well. I agree, it’s not easy to blend on some types of layouts – you might need to experiment a bit to figure out what looks best.

Leave a Reply