This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use the SafeAreaView Component in React Native for iPhone X Compatibility

    Spencer CarliSpencer Carli

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Here we have a pretty basic setup for an application. We've got our navigation bar, we've got some content, and then we've got a tab bar.

    00:08 This works fine on an iPhone 8 or previous generations. However, when you look at the iPhone X, you'll see that things don't work quite the same. Our tab bar runs into the home activity indicator, and our navigation bar runs into the sensor cluster.

    00:22 To fix this, what we'll do is import the SafeAreaView from React Native and start to replace the views with the SafeAreaView. React Native will use this SafeAreaView to go ahead and ensure that content looks as you would expect it to. We can do the same thing for our tab bar.

    00:43 Finally, if we look at the content in portrait mode, you can see, again, our content is hidden by the sensor cluster. Once again, we'll use the SafeAreaView to replace a view. This will ensure that the content doesn't get hidden behind the home activity indicator, regardless of what direction it's turned.

    Discuss

    Discuss