1 00:00:01,260 --> 00:00:01,610 All right. 2 00:00:01,620 --> 00:00:03,290 I think you know exactly what we're doing. 3 00:00:03,300 --> 00:00:08,700 Let's tackle this sign and screen with our reusable auth form and our reusable nav link. 4 00:00:08,700 --> 00:00:13,350 We won't worry about setting up any context or stuff like that to actually call sign in. 5 00:00:13,350 --> 00:00:16,740 Let's just get some components visible on the screen for right now. 6 00:00:16,740 --> 00:00:21,600 So I'm gonna begin by opening up my sign and screen J.S. file that inside of here we're going to add 7 00:00:21,600 --> 00:00:24,380 in a couple of different imports at the very top. 8 00:00:24,420 --> 00:00:29,010 First off I'm going to definitely want to add in an import for my off form 9 00:00:31,900 --> 00:00:43,240 from the up one directory components of form and I'll also get my nav link from up to one directory 10 00:00:43,690 --> 00:00:44,410 components 11 00:00:48,120 --> 00:00:53,650 as well then inside of my sign and screen component I'm going to remove that text element that I have 12 00:00:53,650 --> 00:01:00,700 right now and instead I'm going to turn a multi-layer J OSX expression I'm going to have a top level 13 00:01:00,700 --> 00:01:01,190 view. 14 00:01:01,210 --> 00:01:05,410 Because remember we're probably going to want to have the same exact kind of century logic that we had 15 00:01:05,410 --> 00:01:07,730 inside of our sign up screen as well. 16 00:01:07,780 --> 00:01:12,190 Remember we had styles dot container and inside that container we had a couple of these different styling 17 00:01:12,190 --> 00:01:15,310 rules to somewhat center our content. 18 00:01:15,520 --> 00:01:16,630 We'll take care of that in just a minute. 19 00:01:16,630 --> 00:01:20,230 However let's first make sure that we show the order form and the NAB link. 20 00:01:20,360 --> 00:01:29,150 So inside of here I will show my off form and my nav link now just to remind myself again to keep those 21 00:01:29,150 --> 00:01:34,280 files now blank and off form right here so I can very easily reference the different props that they 22 00:01:34,280 --> 00:01:35,350 expect. 23 00:01:35,360 --> 00:01:37,520 So let's take care of nabbing first. 24 00:01:37,610 --> 00:01:43,300 So inside of NAV link we have to pass in some text and a root name to pass to navigate to. 25 00:01:43,340 --> 00:01:52,520 So for nav link I'll do some text of already are assuming not already but don't have an account sign 26 00:01:52,880 --> 00:01:53,320 up. 27 00:01:53,450 --> 00:02:00,100 Instead and I'll also give this thing a root name. 28 00:02:00,270 --> 00:02:04,020 Let me New Line this component so we can read it very easily. 29 00:02:04,170 --> 00:02:10,500 And so for the root name we want to navigate back to our sign up screen so it'll be simply sign up. 30 00:02:10,640 --> 00:02:14,320 Remember we are using the root names we provide inside of our app dot j ust file. 31 00:02:14,330 --> 00:02:17,860 That's why it simply sign up right there okay. 32 00:02:17,880 --> 00:02:20,090 So now we can take care of our auth form. 33 00:02:20,090 --> 00:02:25,000 So for our auth form we have to put in the header text your message blah blah blah all that stuff the 34 00:02:25,080 --> 00:02:27,970 art form. 35 00:02:28,100 --> 00:02:36,650 I'm gonna make sure that this thing has some header text and I'll make sure that it says Sign In to 36 00:02:36,710 --> 00:02:39,200 your account. 37 00:02:39,280 --> 00:02:43,360 I know that it needs to have some error message but I have not yet hooked up any of the auth context 38 00:02:43,360 --> 00:02:44,210 inside this file. 39 00:02:44,260 --> 00:02:49,480 So for right now I'll just put in a hard coded empty string and then finally we need to make sure we 40 00:02:49,480 --> 00:02:54,820 have on submit and submit button text so I'll do on Summit once again. 41 00:02:54,830 --> 00:03:01,400 I don't really have anything to call for this so I'm gonna put in an empty arrow function like so and 42 00:03:01,410 --> 00:03:06,050 then submit button text and also make that say sign it 43 00:03:09,030 --> 00:03:09,360 okay. 44 00:03:09,370 --> 00:03:11,040 So that should definitely get us started. 45 00:03:11,110 --> 00:03:15,730 Now just one quick thing to remember here are sign and screen is going to show a header at the very 46 00:03:15,730 --> 00:03:16,050 top. 47 00:03:16,060 --> 00:03:19,660 And I'm talking about that header that is shown by default by react navigation. 48 00:03:19,660 --> 00:03:21,180 That one right there. 49 00:03:21,230 --> 00:03:25,270 Now we probably don't want to show that header because we've got the NAV link that a user can tap on 50 00:03:25,450 --> 00:03:27,910 to go back over to the sign up screen. 51 00:03:27,910 --> 00:03:31,540 So in order to disable that header we're going to go through the same process that we just went through 52 00:03:31,810 --> 00:03:39,670 with our sign up screen back down here with our navigation options so underneath my sign in screen component 53 00:03:39,670 --> 00:03:45,490 definition right underneath it I'll say sign in screen. 54 00:03:45,490 --> 00:03:51,570 Dot navigation options and once again I'll say header of no 55 00:03:54,510 --> 00:03:54,750 gate. 56 00:03:54,760 --> 00:03:59,000 I think the very last thing have to do is apply some styling to that route view element. 57 00:03:59,000 --> 00:04:03,130 So on the routes view element I'll put on a style of styles dot container 58 00:04:05,910 --> 00:04:10,680 and then down inside of my style sheet just like the other file we're gonna say that we want container 59 00:04:10,990 --> 00:04:14,790 with a flex of one a justified content of centre. 60 00:04:14,970 --> 00:04:18,690 And then remember we use that little trick of putting on some margin on the bottom to kind of move our 61 00:04:18,690 --> 00:04:19,900 content up. 62 00:04:19,990 --> 00:04:24,180 Now I'm just going to refer back to my sign up screen to make sure that I use the same value of margin 63 00:04:24,180 --> 00:04:27,840 bottom looks like I ended up with a margin bottom of 250. 64 00:04:27,960 --> 00:04:31,260 So going to use it over here as well okay. 65 00:04:31,320 --> 00:04:31,930 That should be it. 66 00:04:31,940 --> 00:04:37,590 I think we're ready for a quick test so I'll save this file there's my sign up screen. 67 00:04:37,980 --> 00:04:43,200 I'll go over to sign in says Sign into your account don't have an account sign up instead button says 68 00:04:43,200 --> 00:04:43,860 Sign in. 69 00:04:43,890 --> 00:04:46,510 Yeah I'd say overall this looks pretty darn good. 70 00:04:46,510 --> 00:04:51,950 So now we've got these two different screens with slightly different forms. 71 00:04:52,040 --> 00:04:52,310 All right. 72 00:04:52,310 --> 00:04:53,240 So I think this looks great. 73 00:04:53,240 --> 00:04:54,620 So the very last thing we do. 74 00:04:54,640 --> 00:04:58,100 We're gonna take a quick pause right here and then we're going to make sure that we start to hook up 75 00:04:58,130 --> 00:05:03,500 our off context to sign and screen and that we eventually call some action function. 76 00:05:03,500 --> 00:05:07,850 Whenever a user submits that form so quick pause and let's take care of that in the next video.