[React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (the notch) and home activity indicator on the iPhone X.

 

SafeAreaView is similar to the View, just for iphone X, the screen is different from previous version. Using SafeAreaView can ensure all the content will be visible

 

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  SafeAreaView,
} from 'react-native';

const App = () => (
  <View style={styles.container}>
    <SafeAreaView style={styles.nav}>
      <Text style={styles.text}>Nav bar</Text>
    </SafeAreaView>
    <SafeAreaView style={styles.content}>
      <Text style={styles.textLight}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae diam consectetur nunc sollicitudin feugiat a sollicitudin velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a dignissim orci. In commodo, velit ac hendrerit laoreet, mauris sapien mollis nulla, at convallis orci diam eu purus. Cras pharetra turpis ac massa laoreet, at consequat lorem pharetra. Pellentesque ac leo ut dui congue eleifend sed sed erat. Nunc at iaculis elit. Duis congue, odio sit amet rutrum imperdiet, quam arcu gravida leo, eu dapibus risus ex et ante. Fusce pellentesque interdum neque, a sodales lacus consequat id. Nunc faucibus lobortis blandit. Proin porttitor commodo pellentesque.
      </Text>
    </SafeAreaView>
    <SafeAreaView style={styles.tab}>
      <Text style={styles.text}>Tab bar</Text>
    </SafeAreaView>
  </View>
);