WEBVTT 1 00:00:00.320 --> 00:00:01.660 Hi and welcome back. 2 00:00:01.680 --> 00:00:02.900 Today we're going to be building 3 00:00:02.930 --> 00:00:06.980 the screen for the registration and it's going to take no time because we already 4 00:00:07.010 --> 00:00:10.090 have a login page that looks exactly like it. 5 00:00:10.120 --> 00:00:14.580 So all we're gonna do is just copy this login directory and paste it inside 6 00:00:14.610 --> 00:00:17.940 the screens folder and we're gonna call it registration instead. 7 00:00:17.960 --> 00:00:19.840 And then we're gonna go here and we're 8 00:00:19.870 --> 00:00:22.620 gonna rename the login file to registration. 9 00:00:22.650 --> 00:00:26.300 And once I do that, my editor is going to prompt me and say 10 00:00:26.320 --> 00:00:28.940 that if you want, we're going to rename the Constants. 11 00:00:28.970 --> 00:00:31.420 And I do want that because I don't want to type. 12 00:00:31.440 --> 00:00:33.300 And I'm going to do this refactoring as 13 00:00:33.320 --> 00:00:37.620 well because it is asking me to do it or not. 14 00:00:37.640 --> 00:00:40.260 So basically my constant is now 15 00:00:40.290 --> 00:00:44.500 registration automatically in this file and is exported as well. 16 00:00:44.530 --> 00:00:48.780 So if your editor doesn't do this automatically, please do it yourself. 17 00:00:48.810 --> 00:00:50.100 Don't forget to. 18 00:00:50.130 --> 00:00:53.980 And now we need to make sure that our navigation handles this. 19 00:00:54.010 --> 00:01:00.160 So let's go to Routes, create a new item here and let's call it registration. 20 00:01:00.440 --> 00:01:02.020 Registration. 21 00:01:02.050 --> 00:01:05.210 And I misspelled it here so great. 22 00:01:05.240 --> 00:01:09.100 And then now we're going to go to main navigation JS file and make sure that we 23 00:01:09.130 --> 00:01:15.180 support a stack screen for that and let's make sure that we use registration route 24 00:01:15.210 --> 00:01:18.020 and that we use the screen that we just created. 25 00:01:18.050 --> 00:01:20.460 And now this was imported for me 26 00:01:20.490 --> 00:01:23.820 automatically which is great, I don't have to type it. 27 00:01:23.850 --> 00:01:28.100 And then we're going to have to go to our login page 28 00:01:28.130 --> 00:01:35.460 and here we're going to say that onpress we want to navigate 29 00:01:35.490 --> 00:01:41.930 we're going to use navigation navigate to Routes registration. 30 00:01:41.960 --> 00:01:46.380 And now we want to make sure that this route is imported so make sure you do 31 00:01:46.410 --> 00:01:49.290 that and that navigation is available for us to use. 32 00:01:49.320 --> 00:01:54.020 So we're going to put navigation here and everything's looking good and if we 33 00:01:54.050 --> 00:01:57.460 press here we're going to be redirected to the registration page. 34 00:01:57.490 --> 00:02:00.210 I can tell because my text here was 35 00:02:00.240 --> 00:02:04.140 automatically changed to registration but everything else looks the same 36 00:02:04.170 --> 00:02:06.620 and we're going to take care of that right now. 37 00:02:06.650 --> 00:02:09.170 So let's go to our registration file 38 00:02:09.200 --> 00:02:13.100 and here we see that we need an email and we also need a password. 39 00:02:13.120 --> 00:02:15.020 So I'm going to leave these two fields as 40 00:02:15.050 --> 00:02:20.380 they are and above it I'm going to create a new field and I'm going to call it first 41 00:02:20.410 --> 00:02:24.170 and Last name as given in the design first and Last Name. 42 00:02:24.200 --> 00:02:27.780 And here I'm going to say enter your full name. 43 00:02:27.810 --> 00:02:32.220 And the keyboard type doesn't have to be an email, so let's set it to default. 44 00:02:32.250 --> 00:02:34.020 And instead of setting the email, 45 00:02:34.050 --> 00:02:37.780 we're going to set full name and we're going to need a state for that. 46 00:02:37.810 --> 00:02:46.780 So let's create it here and call it full name and then set full name. 47 00:02:46.800 --> 00:02:48.340 Great. Let's save this. 48 00:02:48.370 --> 00:02:50.020 And this is looking good. 49 00:02:50.050 --> 00:02:54.940 And instead of welcome back, we should say hello and welcome. 50 00:02:54.970 --> 00:02:57.540 So hello and welcome 51 00:02:57.570 --> 00:02:59.980 and then exclamation mark. 52 00:03:00.010 --> 00:03:06.380 And we don't need to don't have an account button given here, so let's delete this. 53 00:03:06.400 --> 00:03:08.180 And let's also make sure that from our 54 00:03:08.210 --> 00:03:13.220 styles, we get rid of the registration button because we don't need it. 55 00:03:13.250 --> 00:03:15.860 And then what we want to do is also have 56 00:03:15.890 --> 00:03:22.100 this back button given here so we should place it above the scroll view because 57 00:03:22.130 --> 00:03:25.380 otherwise it's going to be centered along with all the content. 58 00:03:25.410 --> 00:03:27.980 So let's create a view container for that. 59 00:03:28.010 --> 00:03:30.420 Now let's place the back button here 60 00:03:30.450 --> 00:03:37.640 and on press we're going to say that we want to navigate and go back. 61 00:03:37.680 --> 00:03:40.060 Okay, now let's close this. 62 00:03:40.090 --> 00:03:41.820 Let's make sure that navigation is 63 00:03:41.850 --> 00:03:49.300 available to us here and then what we want to do is give this some style as well. 64 00:03:49.330 --> 00:03:51.340 So we're going to create a new styles 65 00:03:51.370 --> 00:03:59.220 and we're going to say style back button and let's go here and create that style. 66 00:03:59.250 --> 00:04:01.160 And what we want to do here is give it 67 00:04:01.190 --> 00:04:05.980 some kind of margin left which is 14 and margin top which is seven. 68 00:04:06.010 --> 00:04:15.780 So let's say margin left horizontal scale 14 and margin top vertical scale seven 69 00:04:15.810 --> 00:04:20.660 and these were automatically imported from me so make sure they are for you as well. 70 00:04:20.680 --> 00:04:24.220 And now if we press this back button we're going to go to our login page and if we 71 00:04:24.240 --> 00:04:28.240 press don't have an account then we're going to go on registration page and we're 72 00:04:28.270 --> 00:04:32.140 going to handle the actual authentication a bit later in the course. 73 00:04:32.160 --> 00:04:34.340 So stay tuned and thanks so much for watching. 74 00:04:34.360 --> 00:04:35.960 I'll see you in the next video.