Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Use the SafeAreaView Component in React Native for iPhone X Compatibility

    Spencer CarliSpencer Carli
    react-nativeReact Native

    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.



    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




    Instructor: 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.

    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.

    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.

    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.