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 {
} from 'react-native';
class Main extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <App />
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 →

Elsewhere , ,

5 Responses to React Native and iPhone X: <SafeAreaView />

  1. Šime Vidas says:

    Why is this even possible in the first place? 😅

    • Bramus! says:

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

      • Šime Vidas says:

        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.

        • Bramus! says:

          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.

  2. Pingback: React Native and iPhone X: - ReactJS News

Leave a Reply

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