1
00:00:00,760 --> 00:00:04,690
The very last thing we have to do around our account screen is make sure that we've got some content

2
00:00:04,720 --> 00:00:08,890
scooted down to make sure that it just doesn't show up underneath that status bar.

3
00:00:08,920 --> 00:00:14,690
So we need to make sure that occurs both on iOS and Android as well to do so in the past we've added

4
00:00:14,710 --> 00:00:17,980
in some margin on the top or we've used a header component.

5
00:00:17,980 --> 00:00:20,560
We've essentially tackled this in a variety of different ways.

6
00:00:20,680 --> 00:00:26,500
So this time around we're gonna handle it in one additional style inside of account screen at the very

7
00:00:26,500 --> 00:00:27,020
top.

8
00:00:27,040 --> 00:00:36,510
I'm gonna add in an additional import for safe area view from react navigation so this is a react component

9
00:00:36,600 --> 00:00:40,860
that's going to make sure automatically by looking at the device that we're running on that none of

10
00:00:40,860 --> 00:00:46,760
the content inside the screen is going to render behind that status bar at the very top so we can make

11
00:00:46,760 --> 00:00:51,650
sure that we wrap all of our content inside of here with safe area view rather than the current fragment

12
00:00:51,650 --> 00:00:52,290
that we have.

13
00:00:52,820 --> 00:01:00,110
So the return safe area view and we're gonna add in a special prop here called Force inset that's going

14
00:01:00,110 --> 00:01:01,210
to be an object.

15
00:01:01,220 --> 00:01:08,630
So two sets of curly braces and we'll say top always like so and I'll close off the tag on the other

16
00:01:08,630 --> 00:01:09,090
side.

17
00:01:09,140 --> 00:01:12,260
So safe area view Gates.

18
00:01:12,260 --> 00:01:15,230
Let's say this and do another quick test.

19
00:01:15,410 --> 00:01:20,840
So if I go back over to my account screen now all the content has been automatically shifted down for

20
00:01:20,840 --> 00:01:21,590
me.

21
00:01:21,710 --> 00:01:24,140
We can test out the same thing on Android as well.

22
00:01:24,440 --> 00:01:26,840
And yep that's looking pretty darn good.

23
00:01:26,840 --> 00:01:32,000
So now this is just yet another way to handle that extra kind of notch or that status bar at the very

24
00:01:32,000 --> 00:01:32,710
top.

25
00:01:32,780 --> 00:01:35,170
We can make use of safe area view.

26
00:01:35,330 --> 00:01:40,280
We'll probably end up using safe area view on our track list flow possibly maybe not because we've got

27
00:01:40,280 --> 00:01:44,720
that header on there but I bet we'll end up needing to use it on track create screen as well.

28
00:01:44,840 --> 00:01:50,390
Because right now our content on there is also showing behind our status bar gets us looks pretty good.

29
00:01:50,390 --> 00:01:53,730
And that essentially wraps up our entire authentication flow.

30
00:01:53,780 --> 00:01:57,890
So at this point we've got a really solid authentication system and now we can start to really just

31
00:01:57,890 --> 00:02:03,110
think about how we're going to create these track things on the track create screen and then eventually

32
00:02:03,110 --> 00:02:05,760
list them on the track list flow.

33
00:02:06,020 --> 00:02:09,100
So quick pause and let's start to tackle that in the next video.