Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

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.

    react-nativeReact Native
    iosiOS
    androidAndroid
    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