Easily update and create iPhone X layouts with SafeAreaView

In version 0.50.1, the React Native team introduced a new API for easily dealing with the new iPhone X layout. This API is the SafeAreaView.

With SafeAreaView, you can easily update your existing codebase to be integrated with the iPhone X without a lot of headache.

Here’s how you can use it:

import {

...

SafeAreaView

} from 'react-native'; class Main extends React.Component {

render() {

return (

<SafeAreaView style={styles.safeArea}>

<App />

</SafeAreaView>

)

}

} const styles = StyleSheet.create({

...,

safeArea: {

flex: 1,

backgroundColor: '#ddd'

}

})

What has worked for me for existing apps is to just set some background color that works well with your existing app design, in the above example that is a light gray, and flex: 1 . We then just wrap the top level UI component of our app in the SafeAreaView and we’re good to go.

As you can see in the above screenshots, it already has some integration with React Navigation!

If you cannot upgrade to a newer version of React Native, there is also a JS only version that is available as an npm module, react-native-safe-area-view.

If you want to learn more, check out this article by Raúl Gómez Acuña.