WEBVTT 1 00:00:00.160 --> 00:00:04.020 Hi and welcome to this tutorial on the button component in React native. 2 00:00:04.050 --> 00:00:06.220 The button component is a basic component 3 00:00:06.250 --> 00:00:09.540 that allows you to add clickable buttons to your application. 4 00:00:09.570 --> 00:00:13.820 This can be used for a variety of actions such as submitting a form, 5 00:00:13.850 --> 00:00:18.500 navigating to a new screen or performing any other action that you can think of. 6 00:00:18.530 --> 00:00:22.620 One of the most common uses for the button component is for submitting forms. 7 00:00:22.650 --> 00:00:25.020 So let's take a look at an example of how 8 00:00:25.050 --> 00:00:29.460 to use the button components to submit an email and password. 9 00:00:29.480 --> 00:00:30.940 You're now looking at my screen 10 00:00:30.970 --> 00:00:35.020 with my editor opened, my metro bundler running and my simulator 11 00:00:35.050 --> 00:00:39.820 open here and we're going to be creating a form and we're going to be getting 12 00:00:39.850 --> 00:00:45.740 the values of these forms once the user types in something on click of a button. 13 00:00:45.770 --> 00:00:48.180 So let's get started for this. 14 00:00:48.210 --> 00:00:53.500 What we're going to be needing is first of all the text input component and we are 15 00:00:53.530 --> 00:00:57.460 going to be placing this text input component inside our scroll view. 16 00:00:57.490 --> 00:01:02.640 So let's create the text input component 17 00:01:02.960 --> 00:01:06.930 and then let's give it some style so that it's easily visible to us. 18 00:01:06.960 --> 00:01:16.490 Let's give it a border width of one with border radius of four and let's save it. 19 00:01:16.520 --> 00:01:18.770 And now we see the text input component. 20 00:01:18.800 --> 00:01:21.020 Let's give it some padding as well 21 00:01:21.050 --> 00:01:29.620 and let's give it a placeholder and say please enter your email here 22 00:01:29.650 --> 00:01:37.080 and let's give it a keyboard type of email address. 23 00:01:37.320 --> 00:01:42.100 And then let's create another components 24 00:01:42.130 --> 00:01:47.930 of text that is going to be used for the password. 25 00:01:47.960 --> 00:01:50.140 So we're going to need secure text entry 26 00:01:50.170 --> 00:01:56.290 set to true and we're going to say password here instead. 27 00:01:56.320 --> 00:02:00.900 Now we're going to use the useState hook 28 00:02:00.930 --> 00:02:05.780 to track the changes in what the user enters. 29 00:02:05.810 --> 00:02:09.020 So let's say that we need a constant named 30 00:02:09.050 --> 00:02:15.890 email and set email and the initial state of this is going to be empty. 31 00:02:15.920 --> 00:02:17.940 And we're going to be creating the same 32 00:02:17.970 --> 00:02:27.060 for the password set password to an empty string. 33 00:02:27.090 --> 00:02:33.380 And we're going to be using these here value password. 34 00:02:33.410 --> 00:02:37.500 And let's set up unchanged text handlers 35 00:02:37.530 --> 00:02:46.060 as well and use the set email here with value that's being passed to it. 36 00:02:46.090 --> 00:02:47.420 Let's do the same here. 37 00:02:47.450 --> 00:02:50.080 For our password 38 00:02:52.960 --> 00:02:58.380 we're going to say value set password value. 39 00:02:58.410 --> 00:02:58.980 Great. 40 00:02:59.010 --> 00:03:02.380 Now we're going to be able to track what the user enters here. 41 00:03:02.410 --> 00:03:04.540 We're going to be able to set our 42 00:03:04.570 --> 00:03:08.700 variables with the updated values and all we need is a button. 43 00:03:08.720 --> 00:03:10.610 So for this, we're going to have to import 44 00:03:10.640 --> 00:03:18.100 a button from React native and we're going to use this component here. 45 00:03:18.130 --> 00:03:20.120 And it has its own prop. 46 00:03:20.150 --> 00:03:27.380 So we could give it a title and say that it should say the text submit. 47 00:03:27.410 --> 00:03:29.860 And here's our submit button. 48 00:03:29.890 --> 00:03:36.580 We could give it a color and we could say that color is red and now it becomes red. 49 00:03:36.610 --> 00:03:38.780 What I do want to mention here is 50 00:03:38.810 --> 00:03:42.100 that button component doesn't come with a style prop. 51 00:03:42.130 --> 00:03:43.740 So if you're going to be setting 52 00:03:43.770 --> 00:03:48.540 a background color to it, for example, it's not going to be visible. 53 00:03:48.560 --> 00:03:49.980 So if you want to do something like that, 54 00:03:50.010 --> 00:03:55.180 you could import pressable instead from react native. 55 00:03:55.210 --> 00:03:56.610 And if you were to do that, 56 00:03:56.640 --> 00:04:01.380 then the title wouldn't exist and the color wouldn't exist and you would 57 00:04:01.410 --> 00:04:04.660 actually have to pass a text components to this. 58 00:04:04.690 --> 00:04:07.480 So let's do that. 59 00:04:08.600 --> 00:04:14.360 And you would say submit here and 60 00:04:19.160 --> 00:04:20.980 you could say that the color of this text 61 00:04:21.010 --> 00:04:27.180 should actually be white so that it's visible to us. 62 00:04:27.210 --> 00:04:29.340 Okay, so here we go. 63 00:04:29.360 --> 00:04:37.740 And center this text, align center and let's give it some padding. 64 00:04:37.770 --> 00:04:42.540 Great. Now we have our very ugly form here 65 00:04:42.570 --> 00:04:49.700 and what we could do is set up an event of what happens on press. 66 00:04:49.720 --> 00:04:57.540 So let's do that here's a callback of what happens on press 67 00:04:57.570 --> 00:05:04.180 and we could get the information from the user here and console log 68 00:05:04.210 --> 00:05:09.600 what's the value of the email and what's the value of password. 69 00:05:10.200 --> 00:05:13.900 So if we opened this here and we start our 70 00:05:13.920 --> 00:05:17.540 application, we can start typing here and say 71 00:05:17.570 --> 00:05:26.220 that my email is nata@vache.me and we can type some password and once we click 72 00:05:26.250 --> 00:05:30.060 here, we're going to be able to see what we typed in. 73 00:05:30.090 --> 00:05:36.060 Now sometimes you might not want to make the submit button clickable because 74 00:05:36.090 --> 00:05:39.460 the user has not entered the information that you needed. 75 00:05:39.480 --> 00:05:45.420 So in this case you can set a prop here called disabled. 76 00:05:45.450 --> 00:05:49.020 And this button can be disabled if email 77 00:05:49.040 --> 00:05:59.540 length is empty or if password length is, let's say, less than eight. 78 00:05:59.570 --> 00:06:02.860 So in this case, this button won't be clickable. 79 00:06:02.890 --> 00:06:07.740 So we can set up a console log here called clicked. 80 00:06:07.770 --> 00:06:12.220 And if we were to restart our application and were to click on this, 81 00:06:12.250 --> 00:06:15.700 I'm clicking on it right now, there's going to be nothing visible. 82 00:06:15.730 --> 00:06:19.900 So let's say that I enter my email again 83 00:06:19.920 --> 00:06:23.180 and I enter a password with a length of three. 84 00:06:23.210 --> 00:06:29.180 If I click on this, it's still not pressable and if I enter more, 85 00:06:29.210 --> 00:06:34.680 then we can see that I clicked here and I get the information. 86 00:06:34.920 --> 00:06:37.540 Well, sometimes you might want to make 87 00:06:37.570 --> 00:06:42.900 the background color different if the button is disabled. 88 00:06:42.920 --> 00:06:45.020 So you could totally do that. 89 00:06:45.040 --> 00:06:51.140 And what we could do for that is create an array of styles and we could say 90 00:06:51.170 --> 00:06:59.980 that if email length and password length are not meeting our requirements, 91 00:07:00.010 --> 00:07:08.300 then we want to add a style and we want to add an opacity of 0.5, let's say. 92 00:07:08.330 --> 00:07:18.860 And let's put this in parentheses here. 93 00:07:18.890 --> 00:07:20.140 Great. 94 00:07:20.170 --> 00:07:24.900 So now if I were to delete what I entered 95 00:07:24.920 --> 00:07:30.420 here, we're going to see that our button is able 96 00:07:30.450 --> 00:07:37.060 because we set some opacity to the button in case our requirements are not met. 97 00:07:37.090 --> 00:07:38.620 That's it for our tutorial. 98 00:07:38.650 --> 00:07:40.420 You now know how to use the button 99 00:07:40.450 --> 00:07:43.100 components to submit forms in react native. 100 00:07:43.120 --> 00:07:45.280 Thanks for watching and see you in the next video.