Now, there is one extra thing when building mobile apps for water and phones, we can kind of see this
here on the iPhone, which I rotated.
It has does not appear right.
And this notch can sometimes overlap your content.
The same is true for this homescreen task manager indicator bar here at the bottom on the iPhone.
You see it's overlapping our new game button and yes, I can scroll up, but it bounces back and it
always is above that button.
So these are elements which are part of the the wires which kind of can distort our interface.
For example, if we had left aligned text, it might be overlapped by this notch or in this case, his
home screen.
But nowadays, well, task manager is which are indicator bar is overlapping our content.
And of course, that's not just the case on iPhones.
You could have a similar issue on Android devices there.
You also have devices with a notch or with anything like that.
Now, to make sure that your app always looks good on all different devices, React Native has a special
component.
You can use a component which automatically adjusts your your content to fit onto the screen of your
device and respect Natchez and other things.
So, for example, here on the Gameover screen where I have this issue here on the iPhone, we can import
this special component REAC native offers, and that's the safe area view.
It's called like this because it's wrapping view we can put around our content, which is marking the
the safe area, the area in which we can position our content, because there we won't have problems
with notches and so on.
Now, how do you use the safe area you use?
Simply take it and wrap it around your content.
So around our scroll, you here, for example, we can wrap all of that on the Gameover screen with
the safe area view.
And that's important, by the way, safe area.
You should always wrap your topmost views on this case, this scroll view here.
So now with that saved, if we go back and we go through our game real quick here on the iPhone.
Start a new game.
Fifty five is the number and solve this.
Then what you see?
Is something interesting?
The issue got even worse.
Well, before we take care about this, please note that the scroll bar you see here on the right is
now actually indented a bit.
It's not totally on the right.
And that already is a safe area of you having some effect that add some padding on the left and the
right to make sure that, well, that we respect the notch that would take up some space there and give
us some padding that our content is definitely not overlapped by the notch.
But of course, we have a problem down there.
At the bottom reason for that is that I'm not really using the save area view as my topmost view.
So let's remove it from there from the game over screen, because what is our topmost view?
All that's in the abcess file in the end there we have our.
Content, this view here where we have to hattar and then whichever viewer loading, so for example,
the Hattar is not part of his save area view and it definitely should be.
So let's import safe area view here in the ABC's file and let's wrap this view here with it like that.
So now with this, let's save it and let's have a no look, let's wait for the app to reload.
And what we see is an empty screen now solution is simple, let's take the style we apply to this you
and apply to the same area of you and now get rid of this overview, because now this replaces our normal
view here.
And now this works.
Now let's go through that game again.
Let's quickly solve this.
What you now see is dead here at the bottom.
We now have some extra spacing between that.
I want to go to the task manager bar here and the new game button, which we didn't have before.
We also have the spacing on the left and the right here to respect the notch so that this never overlaps
that we might have on the left here.
And we got some extra padding at the top and the bottom.
Now, of course, our header doesn't look super beautiful with this extra spacing here, and that's
actually something we'll take care about in the navigation module or actually it will be taken care
about for us.
We will not have to do much there.
But again, this is not something we have to worry about.
Therefore, what we can worry about, though, is that our content is always visible.
And with the safe area of you, you can ensure that it is.
Now, that does not mean that you need to wrap all your content or your entire app in a safe area of
you all the time, as you will see in the next module.
When we also talk about navigation in a lot of apps, you'll actually use a library that takes care
about this in a lot of cases for you, the navigation library will use there.
So in a lot of apps, because most of your apps will have navigation, you will not have to manage just
manually.
But if you're building an app where you have no other library that's taking care about this, like disappear,
you might want to consider wrapping your content with a safe area of you, if otherwise content is overlapped.