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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!