WEBVTT 1 00:00:00.080 --> 00:00:01.940 Welcome Back. In this lesson, 2 00:00:01.970 --> 00:00:05.380 we are going to dive into the most essential component for our login 3 00:00:05.410 --> 00:00:09.140 and registration screens, that is the input component. 4 00:00:09.170 --> 00:00:11.380 The input component is an essential part 5 00:00:11.410 --> 00:00:14.460 of any form, whether it's for login or registration. 6 00:00:14.490 --> 00:00:19.700 It allows users to enter their information such as password, email and more. 7 00:00:19.720 --> 00:00:21.620 So we're going to start off by creating 8 00:00:21.650 --> 00:00:25.780 this basic input component and then we're going to add some styles to it. 9 00:00:25.810 --> 00:00:28.820 So grab your code editor and let's get started. 10 00:00:28.850 --> 00:00:31.940 I have my editor already opened and what 11 00:00:31.970 --> 00:00:37.780 I'm planning on doing is creating a screen for our login page given here so that we 12 00:00:37.810 --> 00:00:41.260 can see how we are creating our input component. 13 00:00:41.290 --> 00:00:46.040 Let's create a new directory inside here and let's call it Login. Inside which we're 14 00:00:46.070 --> 00:00:52.420 going to create two new files as always, login JS and then the style JS file. 15 00:00:52.450 --> 00:00:55.500 And here I'm going to type in the style 16 00:00:55.530 --> 00:00:58.980 sheets that we might need for the initial setup. 17 00:00:59.010 --> 00:01:01.580 So let's just create the constants style 18 00:01:01.610 --> 00:01:07.660 and text styles sheet and then create and then let's export default style. 19 00:01:07.690 --> 00:01:10.570 And here I'm just going to create the most basics. 20 00:01:10.600 --> 00:01:13.380 I'm going to import react from react. 21 00:01:13.410 --> 00:01:16.050 I'm going to import Safe Area View 22 00:01:16.080 --> 00:01:21.410 from React Native and I'm going to import the styles that we just created. 23 00:01:21.440 --> 00:01:26.540 And let's create the login constant for our functional component that is 24 00:01:26.570 --> 00:01:31.140 returning null so far and let's export default Login. 25 00:01:31.170 --> 00:01:36.820 So to be able to come to this screen, we're definitely going to need routes. 26 00:01:36.850 --> 00:01:39.340 So let's create a new route called Login 27 00:01:39.370 --> 00:01:43.490 and let's use this route for our main navigation. 28 00:01:43.520 --> 00:01:46.900 And let's create a new stack screen here 29 00:01:46.930 --> 00:01:50.660 using Login and the login screen that we just created. 30 00:01:50.690 --> 00:01:52.980 Let's import this. 31 00:01:53.010 --> 00:01:54.260 Great, let's save it. 32 00:01:54.290 --> 00:01:59.280 And then let's say that our initial route name is going to be Routes Login so 33 00:01:59.310 --> 00:02:04.620 that we are able to see this in our application when our application launches. 34 00:02:04.650 --> 00:02:10.660 And then what we want to do is create the component for the input field here 35 00:02:10.690 --> 00:02:13.780 and then we're going to want to show it on the login screen. 36 00:02:13.810 --> 00:02:19.140 So I'm just going to quickly use the Safe Area View using our global styles 37 00:02:19.170 --> 00:02:24.300 so that we have the white background and it should take up the whole screen. 38 00:02:24.330 --> 00:02:28.420 So we're going to need global style flex as well here. 39 00:02:28.450 --> 00:02:31.940 And now I'm going to save this. 40 00:02:31.970 --> 00:02:33.380 I have some error here. 41 00:02:33.410 --> 00:02:35.700 Yes, this should be closed. Great. 42 00:02:35.730 --> 00:02:37.610 And then we're going to create a new 43 00:02:37.640 --> 00:02:43.170 component and we're going to call it the input component. 44 00:02:43.200 --> 00:02:46.220 And then we're going to need two new files here as well. 45 00:02:46.250 --> 00:02:49.550 Input JS and style JS. 46 00:02:49.750 --> 00:02:52.780 For style.js I'm just going to copy these empty 47 00:02:52.810 --> 00:02:57.220 styles from here so that we don't have to do more typing. 48 00:02:57.250 --> 00:03:01.380 And here we could do the same from the login screen and we might need 49 00:03:01.410 --> 00:03:05.260 to change some stuff up such as we don't need Safe Area View. 50 00:03:05.290 --> 00:03:08.300 We can be returning null so far. 51 00:03:08.330 --> 00:03:12.500 And here we're going to use input name instead. 52 00:03:12.530 --> 00:03:14.760 And then on our login screen we're going 53 00:03:14.790 --> 00:03:21.800 to place inside the scroll view 54 00:03:22.520 --> 00:03:28.780 our input component that we just created. Great. 55 00:03:28.810 --> 00:03:31.140 I'm just quickly going to say that our 56 00:03:31.170 --> 00:03:35.900 vertical indicator shouldn't show and we need to import Props view as well. 57 00:03:35.930 --> 00:03:36.900 So let's do that. 58 00:03:36.930 --> 00:03:42.740 And now we're all set to get started with the development of our input component. 59 00:03:42.770 --> 00:03:46.100 Great. I do want to be able to see this and I 60 00:03:46.130 --> 00:03:51.540 have my simulator running and my terminal running as well with my Metro bundler. 61 00:03:51.570 --> 00:03:53.660 So let's open that up. 62 00:03:53.690 --> 00:03:57.100 Let's reload the application and go here. 63 00:03:57.130 --> 00:04:02.340 And now we're on login screen and we don't see anything because our background is 64 00:04:02.370 --> 00:04:04.740 white and our input component is returning 65 00:04:04.770 --> 00:04:06.040 nothing. 66 00:04:06.040 --> 00:04:07.560 We're not going to set this screen up. 67 00:04:07.590 --> 00:04:10.500 All we're going to do is create the input component. 68 00:04:10.530 --> 00:04:14.500 First of all, what we want to do is make sure that we have labels for our input 69 00:04:14.530 --> 00:04:17.380 component and that we have somewhere to type. 70 00:04:17.410 --> 00:04:22.700 So we're definitely going to need a view component for wrapping all of these items. 71 00:04:22.720 --> 00:04:26.380 So let's import view from 72 00:04:26.410 --> 00:04:33.180 react native inside our input component and inside here we're going to need a text 73 00:04:33.210 --> 00:04:38.340 and we are going to need a text input component. 74 00:04:38.360 --> 00:04:44.900 Let's use the text to display the field title so we can just 75 00:04:44.920 --> 00:04:48.220 call it label and for that we're going to be using Props. 76 00:04:48.250 --> 00:04:56.540 So let's import Props types and we're going to say here that input prop types 77 00:04:56.570 --> 00:05:00.740 and the first thing that we're going to be accepting is a label and that is going 78 00:05:00.770 --> 00:05:06.380 to be of type string and it is going to be required. 79 00:05:06.410 --> 00:05:09.740 So here we're just going to say Props 80 00:05:09.770 --> 00:05:14.380 label then we're going to need a text input 81 00:05:14.410 --> 00:05:22.060 component and that is going to use the states 82 00:05:22.090 --> 00:05:26.260 and because we need states we're going to have to use state here. 83 00:05:26.280 --> 00:05:28.500 So let's save that. 84 00:05:28.520 --> 00:05:30.180 And here we're going to create a new 85 00:05:30.210 --> 00:05:37.060 constant for value and then set value and we're going to use state of empty. 86 00:05:37.090 --> 00:05:39.200 And then what we're going to do is we're 87 00:05:39.230 --> 00:05:45.500 going to say that value is equal to value and on change text, 88 00:05:45.530 --> 00:05:52.360 give us the value and assign it to set value. 89 00:05:52.720 --> 00:05:54.480 Actually I'm just going to call it val 90 00:05:54.510 --> 00:05:59.060 so that we don't mix up our variables' names and great. 91 00:05:59.090 --> 00:06:04.660 So now what we need is to make sure that we pass a label here. 92 00:06:04.690 --> 00:06:08.260 So let's say that that is email 93 00:06:08.290 --> 00:06:12.500 and we see it pop up here and it needs to be styled in a specific way. 94 00:06:12.530 --> 00:06:16.020 So let's click into the email field here 95 00:06:16.040 --> 00:06:22.820 and let's inspect it and then go to input and our styles and create a new style 96 00:06:22.850 --> 00:06:28.700 called label and we're going to give it font family of inter 97 00:06:28.730 --> 00:06:37.660 and font weight of 400 and font size of scale, font size twelve 98 00:06:37.690 --> 00:06:42.940 and line height of scale, font size how much? 99 00:06:42.960 --> 00:06:44.660 15. Okay, great. 100 00:06:44.690 --> 00:06:47.220 So let's import this function so that we 101 00:06:47.250 --> 00:06:50.700 don't get any errors and let's use this color for it. 102 00:06:50.730 --> 00:06:53.620 I'm going to say color. 103 00:06:53.650 --> 00:06:58.500 And now we have to apply this label style to our text. 104 00:06:58.530 --> 00:07:01.540 So let's say style label. 105 00:07:01.570 --> 00:07:02.820 And here we go. 106 00:07:02.850 --> 00:07:09.220 Our email field has changed according to the given styling here. 107 00:07:09.250 --> 00:07:11.940 And now what we need to do is make sure 108 00:07:11.970 --> 00:07:14.740 that we set up our input component correctly. 109 00:07:14.770 --> 00:07:20.180 First of all, we see that we have a margin top of 12 here. 110 00:07:20.200 --> 00:07:23.500 So we're definitely going to be needing styles for our input components. 111 00:07:23.530 --> 00:07:28.360 Let's create a style and let's call it input. 112 00:07:28.560 --> 00:07:33.100 And then we are going to create the input 113 00:07:33.130 --> 00:07:41.500 styles here and we're going to need margin top vertical scale 12. 114 00:07:41.530 --> 00:07:44.900 And we need to import this as well. 115 00:07:44.920 --> 00:07:52.220 And then we do need a padding bottom of twelve. 116 00:07:52.250 --> 00:07:58.260 And actually let's make this into padding vertical instead. 117 00:07:58.290 --> 00:08:01.580 And then we're going to need a bottom 118 00:08:01.600 --> 00:08:08.380 border that is going to be of color this with 50% opacity. 119 00:08:08.410 --> 00:08:13.020 And I'm actually not going to be using the hexadecimal value because I can't give 120 00:08:13.040 --> 00:08:17.780 the hexadecimal value an opacity but I can do so using Rgba. 121 00:08:17.800 --> 00:08:20.660 So I'm just going to say border bottom 122 00:08:20.690 --> 00:08:30.700 width is one and border bottom color is Rgba and let's convert this to RGB 123 00:08:30.730 --> 00:08:35.860 and it is going to be 167, 167 124 00:08:35.890 --> 00:08:42.900 and 167, 0.5. That stands for opacity. Great. 125 00:08:42.930 --> 00:08:48.500 Now we see this very well and the what we need to do for the sake of this page is 126 00:08:48.530 --> 00:08:53.180 give the whole page margin horizontal of 24. 127 00:08:53.200 --> 00:08:55.860 So let's apply that style here. 128 00:08:55.890 --> 00:08:57.580 Let's do it to our scroll view. 129 00:08:57.610 --> 00:08:59.020 So let's say style. 130 00:08:59.050 --> 00:09:01.100 Actually we should give it to content. 131 00:09:01.130 --> 00:09:05.980 So content container, style, style container. 132 00:09:06.010 --> 00:09:10.020 Let's go here and then container. 133 00:09:10.050 --> 00:09:16.580 And we're going to say margin horizontal is going to be horizontal scale 24. 134 00:09:16.610 --> 00:09:21.100 Let's save this and great, now we see this in a better way. 135 00:09:21.130 --> 00:09:28.660 And now what we're going to need is also a placeholder for our inputs. 136 00:09:28.690 --> 00:09:31.220 So what we're going to have to do is go 137 00:09:31.250 --> 00:09:36.640 to our input component and say that we're expecting a placeholder and it is going 138 00:09:36.670 --> 00:09:44.420 to be a string and it is not going to be required if they don't want to. 139 00:09:44.440 --> 00:09:51.060 Just say if placeholder placeholder is available, 140 00:09:51.080 --> 00:09:58.740 then we need props, placeholder, and otherwise it's just going to be null. 141 00:09:58.770 --> 00:10:01.220 And if we were to pass a placeholder 142 00:10:01.250 --> 00:10:10.060 from here such as enter your email, we're going to see it here. 143 00:10:10.080 --> 00:10:13.180 Great. Now that we have all of that set up, 144 00:10:13.200 --> 00:10:18.920 what we need to do is control what happens when the user starts typing. 145 00:10:19.160 --> 00:10:25.380 So let's say that onChangeText, we don't only want to get the value here. 146 00:10:25.410 --> 00:10:33.640 What we also want to do is call props onChangeText. 147 00:10:34.520 --> 00:10:38.976 And let's say here that we 148 00:10:39.176 --> 00:10:43.260 need a function for this. 149 00:10:43.290 --> 00:10:46.980 Okay, I haven't closed this. Okay. 150 00:10:47.010 --> 00:10:51.420 And then by default it's just going to be 151 00:10:51.440 --> 00:10:54.536 default props, onChangeText, 152 00:10:54.736 --> 00:10:58.960 it's just going to be an empty function. 153 00:10:59.200 --> 00:11:05.540 And to this function we're going to pass the value so that we're able to 154 00:11:05.570 --> 00:11:09.700 get this information here and do something with it. 155 00:11:09.730 --> 00:11:15.200 So we can create a use state here 156 00:11:16.120 --> 00:11:24.420 and call it an email and then set email and then use state of empty. 157 00:11:24.450 --> 00:11:35.240 And here we can pass an onChangeText, get the value and set email to this value. 158 00:11:35.600 --> 00:11:41.500 We can even pass the type of the keyboard that should show here. 159 00:11:41.530 --> 00:11:46.101 So we can say something like 160 00:11:46.301 --> 00:11:49.040 keyboard type here 161 00:11:49.920 --> 00:11:53.386 and then we're going to say that it is 162 00:11:53.586 --> 00:11:55.940 equal to props keyboard type 163 00:11:55.970 --> 00:11:58.385 if it's available, 164 00:11:58.585 --> 00:12:03.080 otherwise it's going to be default. 165 00:12:03.160 --> 00:12:06.820 So let's accept the keyboard type here 166 00:12:06.850 --> 00:12:09.375 and we're going to say that it is 167 00:12:09.575 --> 00:12:11.900 a string, but it is not required. 168 00:12:11.930 --> 00:12:16.780 And we could actually set the default value here. 169 00:12:16.810 --> 00:12:19.980 So keyboard type would be default 170 00:12:20.010 --> 00:12:23.820 and we could just leave this statement out of here. 171 00:12:23.850 --> 00:12:29.400 And here we can pass a keyboard type of email. 172 00:12:29.920 --> 00:12:34.640 Okay, so it's not email, it's email address. 173 00:12:35.760 --> 00:12:36.740 Great. 174 00:12:36.770 --> 00:12:41.680 And now if we go here and if we toggle the software's keyboard, 175 00:12:41.710 --> 00:12:46.100 we're going to see that we have an email sign available here. 176 00:12:46.120 --> 00:12:46.620 Great. 177 00:12:46.650 --> 00:12:51.620 So now let's check that set email is working as it should. 178 00:12:51.650 --> 00:12:54.740 What we could do for that is just console 179 00:12:54.770 --> 00:12:59.620 log email here and let's open our 180 00:12:59.650 --> 00:13:05.740 terminal, actually the bundler, okay. 181 00:13:05.770 --> 00:13:13.020 And then we can start typing here, nata@vacheishvili.com for example. 182 00:13:13.050 --> 00:13:14.780 And it's working out. 183 00:13:14.810 --> 00:13:17.620 We get the email and set it here. 184 00:13:17.640 --> 00:13:19.120 So when we're going to be using it 185 00:13:19.150 --> 00:13:23.500 for forms, we're going to be all get with this function. 186 00:13:23.530 --> 00:13:26.720 And one more thing I want to do is we're 187 00:13:26.750 --> 00:13:30.620 going to have to say if it is a secure entry or not. 188 00:13:30.650 --> 00:13:35.060 Because as we see here, we might have a password. 189 00:13:35.080 --> 00:13:37.737 So let's go to input here 190 00:13:37.937 --> 00:13:40.500 and say secure text entry. 191 00:13:40.530 --> 00:13:43.863 And we're going to say that we're 192 00:13:44.063 --> 00:13:47.700 going to have secure text entry prop. 193 00:13:47.730 --> 00:13:52.640 And by default that is going to be false. 194 00:13:53.000 --> 00:13:59.340 But we could use secure text entry prop type for our 195 00:13:59.540 --> 00:14:01.900 going to be a string. 196 00:14:01.930 --> 00:14:03.780 Actually, no boolean. 197 00:14:03.810 --> 00:14:07.300 And if we say here that secure text entry 198 00:14:07.330 --> 00:14:10.655 is true, then we're going to see 199 00:14:10.855 --> 00:14:13.980 this text entered as a password. 200 00:14:14.010 --> 00:14:18.020 So that's it for our tutorial today. 201 00:14:18.050 --> 00:14:21.499 We already have our text input component 202 00:14:21.699 --> 00:14:25.120 ready and we can use it to build our login 203 00:14:25.120 --> 00:14:27.060 screen, which is going to be the text styles. 204 00:14:27.080 --> 00:14:29.360 So stay tuned and I'll see you in the next video.