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 →