1 00:00:02,250 --> 00:00:09,480 Now, there is one extra thing when building mobile apps for water and phones, we can kind of see this 2 00:00:09,480 --> 00:00:12,310 here on the iPhone, which I rotated. 3 00:00:12,330 --> 00:00:14,280 It has does not appear right. 4 00:00:14,520 --> 00:00:18,680 And this notch can sometimes overlap your content. 5 00:00:19,380 --> 00:00:26,010 The same is true for this homescreen task manager indicator bar here at the bottom on the iPhone. 6 00:00:26,010 --> 00:00:31,830 You see it's overlapping our new game button and yes, I can scroll up, but it bounces back and it 7 00:00:31,830 --> 00:00:33,790 always is above that button. 8 00:00:33,960 --> 00:00:40,320 So these are elements which are part of the the wires which kind of can distort our interface. 9 00:00:40,330 --> 00:00:46,660 For example, if we had left aligned text, it might be overlapped by this notch or in this case, his 10 00:00:46,830 --> 00:00:47,790 home screen. 11 00:00:47,790 --> 00:00:54,260 But nowadays, well, task manager is which are indicator bar is overlapping our content. 12 00:00:54,600 --> 00:00:56,880 And of course, that's not just the case on iPhones. 13 00:00:57,030 --> 00:01:00,110 You could have a similar issue on Android devices there. 14 00:01:00,120 --> 00:01:03,270 You also have devices with a notch or with anything like that. 15 00:01:04,080 --> 00:01:11,670 Now, to make sure that your app always looks good on all different devices, React Native has a special 16 00:01:11,670 --> 00:01:12,240 component. 17 00:01:12,240 --> 00:01:19,950 You can use a component which automatically adjusts your your content to fit onto the screen of your 18 00:01:19,950 --> 00:01:23,010 device and respect Natchez and other things. 19 00:01:23,820 --> 00:01:29,310 So, for example, here on the Gameover screen where I have this issue here on the iPhone, we can import 20 00:01:29,310 --> 00:01:33,690 this special component REAC native offers, and that's the safe area view. 21 00:01:33,990 --> 00:01:41,580 It's called like this because it's wrapping view we can put around our content, which is marking the 22 00:01:41,610 --> 00:01:48,840 the safe area, the area in which we can position our content, because there we won't have problems 23 00:01:48,840 --> 00:01:51,030 with notches and so on. 24 00:01:51,570 --> 00:01:54,060 Now, how do you use the safe area you use? 25 00:01:54,060 --> 00:01:57,600 Simply take it and wrap it around your content. 26 00:01:57,600 --> 00:02:04,560 So around our scroll, you here, for example, we can wrap all of that on the Gameover screen with 27 00:02:04,560 --> 00:02:06,030 the safe area view. 28 00:02:07,190 --> 00:02:09,740 And that's important, by the way, safe area. 29 00:02:09,880 --> 00:02:15,000 You should always wrap your topmost views on this case, this scroll view here. 30 00:02:15,800 --> 00:02:22,430 So now with that saved, if we go back and we go through our game real quick here on the iPhone. 31 00:02:24,150 --> 00:02:25,320 Start a new game. 32 00:02:25,350 --> 00:02:28,440 Fifty five is the number and solve this. 33 00:02:33,040 --> 00:02:34,080 Then what you see? 34 00:02:35,080 --> 00:02:36,430 Is something interesting? 35 00:02:36,700 --> 00:02:37,750 The issue got even worse. 36 00:02:38,140 --> 00:02:45,670 Well, before we take care about this, please note that the scroll bar you see here on the right is 37 00:02:45,670 --> 00:02:48,030 now actually indented a bit. 38 00:02:48,040 --> 00:02:49,540 It's not totally on the right. 39 00:02:49,810 --> 00:02:55,150 And that already is a safe area of you having some effect that add some padding on the left and the 40 00:02:55,150 --> 00:03:04,390 right to make sure that, well, that we respect the notch that would take up some space there and give 41 00:03:04,390 --> 00:03:09,330 us some padding that our content is definitely not overlapped by the notch. 42 00:03:09,700 --> 00:03:11,920 But of course, we have a problem down there. 43 00:03:11,920 --> 00:03:17,500 At the bottom reason for that is that I'm not really using the save area view as my topmost view. 44 00:03:17,980 --> 00:03:22,540 So let's remove it from there from the game over screen, because what is our topmost view? 45 00:03:22,930 --> 00:03:27,370 All that's in the abcess file in the end there we have our. 46 00:03:28,490 --> 00:03:34,490 Content, this view here where we have to hattar and then whichever viewer loading, so for example, 47 00:03:34,490 --> 00:03:38,360 the Hattar is not part of his save area view and it definitely should be. 48 00:03:39,050 --> 00:03:49,550 So let's import safe area view here in the ABC's file and let's wrap this view here with it like that. 49 00:03:52,420 --> 00:03:57,610 So now with this, let's save it and let's have a no look, let's wait for the app to reload. 50 00:03:58,660 --> 00:04:05,440 And what we see is an empty screen now solution is simple, let's take the style we apply to this you 51 00:04:05,560 --> 00:04:10,810 and apply to the same area of you and now get rid of this overview, because now this replaces our normal 52 00:04:10,810 --> 00:04:11,380 view here. 53 00:04:12,600 --> 00:04:13,590 And now this works. 54 00:04:13,630 --> 00:04:15,710 Now let's go through that game again. 55 00:04:18,090 --> 00:04:19,560 Let's quickly solve this. 56 00:04:23,630 --> 00:04:27,480 What you now see is dead here at the bottom. 57 00:04:28,100 --> 00:04:30,720 We now have some extra spacing between that. 58 00:04:30,980 --> 00:04:36,090 I want to go to the task manager bar here and the new game button, which we didn't have before. 59 00:04:36,680 --> 00:04:42,380 We also have the spacing on the left and the right here to respect the notch so that this never overlaps 60 00:04:42,650 --> 00:04:44,180 that we might have on the left here. 61 00:04:44,450 --> 00:04:48,310 And we got some extra padding at the top and the bottom. 62 00:04:48,740 --> 00:04:55,850 Now, of course, our header doesn't look super beautiful with this extra spacing here, and that's 63 00:04:55,850 --> 00:05:00,410 actually something we'll take care about in the navigation module or actually it will be taken care 64 00:05:00,410 --> 00:05:01,270 about for us. 65 00:05:01,280 --> 00:05:02,860 We will not have to do much there. 66 00:05:03,440 --> 00:05:05,680 But again, this is not something we have to worry about. 67 00:05:05,690 --> 00:05:10,310 Therefore, what we can worry about, though, is that our content is always visible. 68 00:05:10,310 --> 00:05:13,630 And with the safe area of you, you can ensure that it is. 69 00:05:14,180 --> 00:05:19,820 Now, that does not mean that you need to wrap all your content or your entire app in a safe area of 70 00:05:19,820 --> 00:05:23,390 you all the time, as you will see in the next module. 71 00:05:23,390 --> 00:05:29,720 When we also talk about navigation in a lot of apps, you'll actually use a library that takes care 72 00:05:29,720 --> 00:05:34,670 about this in a lot of cases for you, the navigation library will use there. 73 00:05:34,910 --> 00:05:39,980 So in a lot of apps, because most of your apps will have navigation, you will not have to manage just 74 00:05:39,980 --> 00:05:40,640 manually. 75 00:05:40,940 --> 00:05:46,940 But if you're building an app where you have no other library that's taking care about this, like disappear, 76 00:05:47,120 --> 00:05:53,420 you might want to consider wrapping your content with a safe area of you, if otherwise content is overlapped.