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):
And here’s what the same layout looks like wrapped in 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.
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.