React Native and iPhone X: <SafeAreaView />

One of the elements that shipped with React 0.50 is <SafeAreaView />. It’s a component which you can use to prevent your content from creeping below The Notch and Home Indicator on iPhone X.

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'
  }
})

For the best result give the <SafeAreaView /> the same backgroundColor as your <App /> component, or use the <SafeAreaView /> within your <App /> component where needed.

Projects like react-navigation use <SafeAreaView /> to properly layout their StackNavigator.

Do note that the version that ships with RN itself differs from the version maintained by the React Community.

Using SafeAreaView with iPhone X and React Native →
React Native & iPhone X →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

10 Comments

    1. What do you mean with “this”? The fact that content can go below “the notch”? Don’t get it 😬

      1. Sorry, I wasn’t clear. Yes, the example on the left iPhone in the image. I can see why it makes sense to allow content to go underneath the bar at the bottom of the screen, but not at the top of the screen, since it contains a the status bar that is already full, so there’s no room for the app’s content anyway.

        1. Must say I do see some use cases. Here’s a screenshot of an app I made. If the map were to be cut off that’d be a whole different effect.

          1. @Igor: You only need to use SafeAreaView if you want to prevent stuff from creeping underneath The Notch (TM).

            In my example I have placed the Map outside the SafeAreaView, so that it fills all the available space it can take.

  1. I have a clarification. Here the withSafeArea has a space in it’s header. Is this is a correct behaviour.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.