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 = () => (  
         
            
       
        Nav bar
           
          
            
       
                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.      
           
          
            
       
        Tab bar
           
        
     );