React Native & iPhone X

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.

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AppSync and Amplify, and the founder of React Native Training.

If you like React and React Native, checkout out our podcast — React Native Radio on Devchat.tv.

Also, check out my book, React Native in Action now available from Manning Publications

If you enjoyed this article, please recommend and share it! Thanks for your time