Hi and welcome to this tutorial on the button component in React native.
The button component is a basic component
that allows you to add clickable buttons to your application.
This can be used for a variety of actions such as submitting a form,
navigating to a new screen or performing any other action that you can think of.
One of the most common uses for the button component is for submitting forms.
So let's take a look at an example of how
to use the button components to submit an email and password.
You're now looking at my screen
with my editor opened, my metro bundler running and my simulator
open here and we're going to be creating a form and we're going to be getting
the values of these forms once the user types in something on click of a button.
So let's get started for this.
What we're going to be needing is first of all the text input component and we are
going to be placing this text input component inside our scroll view.
So let's create the text input component
and then let's give it some style so that it's easily visible to us.
Let's give it a border width of one with border radius of four and let's save it.
And now we see the text input component.
Let's give it some padding as well
and let's give it a placeholder and say please enter your email here
and let's give it a keyboard type of email address.
And then let's create another components
of text that is going to be used for the password.
So we're going to need secure text entry
set to true and we're going to say password here instead.
Now we're going to use the useState hook
to track the changes in what the user enters.
So let's say that we need a constant named
email and set email and the initial state of this is going to be empty.
And we're going to be creating the same
for the password set password to an empty string.
And we're going to be using these here value password.
And let's set up unchanged text handlers
as well and use the set email here with value that's being passed to it.
Let's do the same here.
For our password
we're going to say value set password value.
Great.
Now we're going to be able to track what the user enters here.
We're going to be able to set our
variables with the updated values and all we need is a button.
So for this, we're going to have to import
a button from React native and we're going to use this component here.
And it has its own prop.
So we could give it a title and say that it should say the text submit.
And here's our submit button.
We could give it a color and we could say that color is red and now it becomes red.
What I do want to mention here is
that button component doesn't come with a style prop.
So if you're going to be setting
a background color to it, for example, it's not going to be visible.
So if you want to do something like that,
you could import pressable instead from react native.
And if you were to do that,
then the title wouldn't exist and the color wouldn't exist and you would
actually have to pass a text components to this.
So let's do that.
And you would say submit here and
you could say that the color of this text
should actually be white so that it's visible to us.
Okay, so here we go.
And center this text, align center and let's give it some padding.
Great. Now we have our very ugly form here
and what we could do is set up an event of what happens on press.
So let's do that here's a callback of what happens on press
and we could get the information from the user here and console log
what's the value of the email and what's the value of password.
So if we opened this here and we start our
application, we can start typing here and say
that my email is nata@vache.me and we can type some password and once we click
here, we're going to be able to see what we typed in.
Now sometimes you might not want to make the submit button clickable because
the user has not entered the information that you needed.
So in this case you can set a prop here called disabled.
And this button can be disabled if email
length is empty or if password length is, let's say, less than eight.
So in this case, this button won't be clickable.
So we can set up a console log here called clicked.
And if we were to restart our application and were to click on this,
I'm clicking on it right now, there's going to be nothing visible.
So let's say that I enter my email again
and I enter a password with a length of three.
If I click on this, it's still not pressable and if I enter more,
then we can see that I clicked here and I get the information.
Well, sometimes you might want to make
the background color different if the button is disabled.
So you could totally do that.
And what we could do for that is create an array of styles and we could say
that if email length and password length are not meeting our requirements,
then we want to add a style and we want to add an opacity of 0.5, let's say.
And let's put this in parentheses here.
Great.
So now if I were to delete what I entered
here, we're going to see that our button is able
because we set some opacity to the button in case our requirements are not met.
That's it for our tutorial.
You now know how to use the button
components to submit forms in react native.
Thanks for watching and see you in the next video.