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