1
00:00:01,200 --> 00:00:05,580
In this video we're going to continue doing a couple of odds and ends tests around our sign up screen

2
00:00:06,210 --> 00:00:10,310
so our sign up screen is really not supposed to have a header right there at the very top.

3
00:00:10,410 --> 00:00:14,550
If we go back to our original mockup Well it's really just supposed to be empty and to navigate over

4
00:00:14,550 --> 00:00:19,290
the sign in a user is supposed to press that blue link down there rather than trying to press something

5
00:00:19,290 --> 00:00:20,730
up inside the header.

6
00:00:20,730 --> 00:00:22,920
So we need to make sure that we hide the header.

7
00:00:22,920 --> 00:00:27,180
In addition we probably want to make sure that the form kind of gets at least somewhat centered on the

8
00:00:27,180 --> 00:00:29,280
screen in this mockup.

9
00:00:29,280 --> 00:00:34,110
Back over here it's kind of reflected as being somewhat centered maybe not like perfectly centered on

10
00:00:34,110 --> 00:00:37,260
the screen but at least somewhat centered vertically.

11
00:00:37,260 --> 00:00:38,990
So let's try to take care of both those tests.

12
00:00:39,000 --> 00:00:44,640
We want to hide the header in at least somewhat vertically center our content to hide the header.

13
00:00:44,670 --> 00:00:49,290
We're going to add in a navigation options property to our sign up screen component.

14
00:00:49,290 --> 00:00:59,680
So underneath my component I'll define sign up screen dot navigation options so remember if we define

15
00:00:59,740 --> 00:01:06,090
navigation options in a sign of a function we can return an object that's going to customize our stack

16
00:01:06,100 --> 00:01:12,010
navigator and change the way in which react navigation behaves and shows the screen the option that

17
00:01:12,010 --> 00:01:17,700
we want to use in this particular case to hide the header will be header of No.

18
00:01:17,770 --> 00:01:22,390
That means when it comes to showing a header component for our sign up screen just don't show anything

19
00:01:22,390 --> 00:01:23,410
at all.

20
00:01:23,440 --> 00:01:30,130
So if we save this the header will now disappear just you know an alternative way to write this out.

21
00:01:30,130 --> 00:01:34,460
Right here we do not have to assign a function to navigation options.

22
00:01:34,510 --> 00:01:38,680
We only used a function previously the last time we made use of navigation options because we wanted

23
00:01:38,680 --> 00:01:44,200
to get access to that navigation prop coming into this function so we could wire up I think it was an

24
00:01:44,230 --> 00:01:49,300
icon and whenever user tapped that icon we can then do some navigation if we don't want to define a

25
00:01:49,300 --> 00:01:55,060
function here we could alternatively just assign navigation options an object with our configuration

26
00:01:55,090 --> 00:01:56,200
options.

27
00:01:56,200 --> 00:02:04,200
So in other words we could have just written out object with header of nil like so and the header still

28
00:02:04,200 --> 00:02:05,070
gone.

29
00:02:05,070 --> 00:02:07,890
Now there's not any great reason to go with one approach over the other.

30
00:02:07,890 --> 00:02:11,340
In other words an object versus a function that returns an object.

31
00:02:11,340 --> 00:02:14,790
I'm just letting you know that when you start to look at documentation sometimes you're going to see

32
00:02:14,790 --> 00:02:19,770
navigation options tied to a function or something tied to a component as a function and sometimes it

33
00:02:19,770 --> 00:02:25,050
will be a plain object both them are a hundred percent equivalent except for if we want to get access

34
00:02:25,050 --> 00:02:27,980
to that navigate function OK.

35
00:02:27,980 --> 00:02:31,640
So now that we've hit in the header there Well now our content is all the way up at the top.

36
00:02:31,660 --> 00:02:32,910
So let's take care of part two.

37
00:02:33,190 --> 00:02:38,500
We want to make sure that we kind of vertically center all of our content so to do so we're going to

38
00:02:38,500 --> 00:02:40,630
go back up to our component.

39
00:02:40,630 --> 00:02:47,380
Right now we're showing a react fragment and remember a fragment indicated by these empty tags essentially

40
00:02:47,380 --> 00:02:52,360
means don't show any wrapping element when this actually gets rendered on the screen.

41
00:02:52,630 --> 00:02:57,430
If we use a fragment as we are right here we can't apply any actual styling to it.

42
00:02:57,460 --> 00:03:03,610
So if you want to apply some styling to this overall component we have to instead show a view element

43
00:03:04,480 --> 00:03:05,740
like so.

44
00:03:05,780 --> 00:03:11,360
So now we can apply some styling rules to that view element I'm going to put in a style right away I'll

45
00:03:11,360 --> 00:03:18,860
say style is styles dot container and now we can go back down to our styles object and add in some container

46
00:03:18,860 --> 00:03:25,110
property to it and use that container property to once again kind of central our content.

47
00:03:25,130 --> 00:03:32,730
So here's my styles object I'll put in the container section and get started just to help myself imagine

48
00:03:32,970 --> 00:03:35,010
the extents of this element on the screen.

49
00:03:35,010 --> 00:03:40,470
I'm going to give it a big red border again just so I can really imagine the entire height and width

50
00:03:40,530 --> 00:03:41,770
of that component.

51
00:03:41,910 --> 00:03:49,180
So I'll give it a border color of red and a border width of 10.

52
00:03:49,190 --> 00:03:54,050
So now if I save that I'll see exactly the extents of that component.

53
00:03:54,050 --> 00:03:58,850
So right now you'll notice that the view element that is wrapping all of our content has shrunk just

54
00:03:58,850 --> 00:04:00,640
to fit that amount of content.

55
00:04:00,680 --> 00:04:06,650
So we have that's big red border indicated by this view and that view has shrunk just to fit everything

56
00:04:06,650 --> 00:04:08,110
that's inside there.

57
00:04:08,150 --> 00:04:12,710
So the first thing we probably want to do to make sure that we can get all this content centered is

58
00:04:12,800 --> 00:04:16,560
add a flex of one onto that view element.

59
00:04:16,640 --> 00:04:20,960
So if we save that that's going to cause the view to expand and fill up as much vertical space as it

60
00:04:20,960 --> 00:04:21,990
possibly can.

61
00:04:22,660 --> 00:04:24,520
It's now that the view has expanded.

62
00:04:24,520 --> 00:04:29,380
We can now use some of our different flex box properties to position everything inside of here.

63
00:04:29,500 --> 00:04:35,860
In some particular location in our case we wanted to center all of our content so we could apply a justified

64
00:04:35,860 --> 00:04:39,580
content of center to center everything vertically.

65
00:04:39,680 --> 00:04:44,550
It's all put in a justified content of center.

66
00:04:44,740 --> 00:04:47,500
So now we save that well.

67
00:04:47,510 --> 00:04:48,330
Everything centered.

68
00:04:49,110 --> 00:04:52,990
Now just one little problem even though we definitely just centered all of our content.

69
00:04:53,000 --> 00:04:55,030
It sure doesn't look centered.

70
00:04:55,220 --> 00:04:59,270
I don't know about you but it really feels like there's way too much space up here.

71
00:04:59,450 --> 00:05:04,850
Really just way too much so it'd be great if we could center this stuff but still have it kind of like

72
00:05:04,910 --> 00:05:10,520
more towards the top edge and get rid of some of this extra space and we have inside of here so to do

73
00:05:10,520 --> 00:05:17,600
so one very easy way to accomplish this would be to put some extra margin bottom on our container so

74
00:05:17,600 --> 00:05:20,860
that's getting us some extra spacing down here at the bottom.

75
00:05:20,900 --> 00:05:27,570
Outside of that red border all of our content is still going to be centered inside of this red element.

76
00:05:27,620 --> 00:05:31,370
So essentially if we just subtract some of the available space from the very bottom that's going to

77
00:05:31,370 --> 00:05:33,560
essentially force our content to move up.

78
00:05:34,220 --> 00:05:37,250
Let's just try applying some margin bottom and you'll see what I mean.

79
00:05:38,040 --> 00:05:41,920
It's open in a margin bottom of like 200 okay.

80
00:05:41,940 --> 00:05:42,990
That looks a lot better.

81
00:05:43,000 --> 00:05:47,560
So again now we have some margin on the bottom so that's all the extra spacing you see right here and

82
00:05:47,560 --> 00:05:49,060
now in the remaining space.

83
00:05:49,060 --> 00:05:52,430
Our content is being centered inside there as best as it can.

84
00:05:52,440 --> 00:05:56,310
So now our content is much further up on the screen and it looks a lot more reasonable.

85
00:05:56,320 --> 00:05:59,860
Definitely closer to our original markup over here.

86
00:05:59,870 --> 00:06:04,820
Now if you want to you can play around with that margin bottom maybe go to like 250 and get stuff to

87
00:06:04,820 --> 00:06:06,740
go even a little bit higher.

88
00:06:06,880 --> 00:06:09,300
I'll test this out on Android as well really quickly.

89
00:06:09,530 --> 00:06:11,870
And yeah I'd say this looks pretty reasonable over here too.

90
00:06:14,740 --> 00:06:15,010
Okay.

91
00:06:15,040 --> 00:06:15,830
That's a good start.

92
00:06:15,850 --> 00:06:20,450
So going to take off the border red and that's what we are left with.

93
00:06:20,930 --> 00:06:22,670
Yeah I'd say it's definitely a good start.

94
00:06:23,700 --> 00:06:23,980
All right.

95
00:06:23,990 --> 00:06:28,580
So now that we've got a lot of the styling stuff and the header out of the way let's take one more pause

96
00:06:28,610 --> 00:06:32,870
when we come back the next video we're going to start to make sure that we handle these text inputs.

97
00:06:32,870 --> 00:06:38,060
We received some email and password and eventually attempt to sign a user up into our application.