Hi and welcome to this tutorial on the text input components in React native.
The text input component is used to gather text input from the user.
It is a fundamental building block
for creating forms, search bars and other text-based user interfaces in React native.
Now let's dive into coding and explore what text input component has to offer us
and how we can use it for better user experience.
Screen with my editor opened and my simulator running and I have
my Metro bundler running here as well so that we see the changes in the simulator.
And what I want to display to you is how to use text input component.
So first what we need to do is import the text input component from React native
and then we're going to be using the text input component in here.
After we save this, you're going to see that nothing's
displayed here even though the text input component is actually present here.
And the reason for this is because we don't have any styles.
So let's apply some styles to this
and let's apply a border first of all so that we see this.
And here we go.
Here's our text input component.
We could make this more beautiful by adding some padding to this, maybe ten.
And we could make it have the round borders as well.
So we could give it some border radius, let's say four.
And here we go.
We have the text input component now.
So first and most important thing about text input component is that you could
give it a value and this will be a current text value of the input field.
So if you give it some default value,
it could be empty which would set it to no value.
Or you could just say your name here,
your name maybe and this would actually be written here.
So whenever you try to change it,
this text could not change because we don't have an event handler and you could
have an event handler that's called onChangeText.
And this will be a callback function that is called when the text value changes.
So let's set this up for this.
We're going to use the useState hook
and we're going to create a variable here and we're going to call it text value.
And then we're going to create a set of function for this that will be called
set text value and the default value will be set to an empty string.
And now let's use this for our default value here and onChangeText
let's accept a value that's incoming
from the user and say set text value to this value.
Right now what's going to happen is
that if we're going to enter the text, we're going to be seeing it.
And every time we enter a value
in the input field, we're going to get the whole value in this function.
So we could use a console log function here to see how this functions.
So let's reload our app and say my name is Nata.
So you see with each character we get the value.
Great.
So the next thing that I want to discuss is the placeholder prop and this will be
a placeholder to let your user know what kind of input is expected here.
So we could say please enter your name here.
And if we reload our application, we're going to see a placeholder here
and the user will know that they are going to have to type in their name.
What we could also use is out of focus
and we could pass it a boolean value of True.
And this way when we reload our application,
the input field will be automatically focused.
So notice that if we set this to false, if we reload our application,
the input field is not going to be auto focused.
So you'll have to enter and press here so that you can enter some text.
So let's set this to true.
And the last thing that I want to discuss is for example,
how to handle the passwords if the user wants to enter a password.
So for this, let's create another text
input component and let's say that we are expecting a password here.
Let's create another handler here for password value, set password value
that's going to be an empty initial state as well.
And then let's use this function here and let's use the password value here.
And then you could use secure text entry which takes in a boolean value.
And this determines whether the input should be obscured.
And it's typically used for password fields.
So if we say true for this,
when we're going to be entering some input here, it's going to appear as password.
And notice that if we console log the value here,
we are actually going to be getting the value that user is entering.
So let's say that I'm entering my password here.
We're going to be receiving the characters that I'm typing here.
Great.
So this is how the password text input component would work.
Now I also want to discuss the properties called keyboard type.
And this is used to specify the type
of the keyboard that should be displayed when the input field is focused.
And the default value for this is default.
So keyboard type default would give us the default keyboard type.
And if we want to see how the keyboard would look, we could go
here and we could just say toggle keyboard for the software.
So this is the default keyboard.
But if we were to change
the type of the keyboard to numeric,
for example, you would see the numeric keyboard here.
What you could also do is have a phone pad
value that would give you different things here
such as plus, just in case you're calling internationally, let's say.
And you could also have a keyboard specifically for emails.
So let's copy this for example and paste it here.
And let's set up an email input field as well.
So let's say email,
set email and then let's have email here and set email and we're going to say
please enter your email here and let's
give it the keyboard type of email.
Actually it's email address and then if we press here
we're going to see that email key is present here for easy access.
This is good for the user experience.
Now I also want to discuss a property called return key type
and return key type is used to specify the type of return key that should be
displayed on the keyboard and I will discuss some of the possibilities.
So this is the return key here.
So let's say we set up the return key type here.
Some of the possibilities for here is
for example done and if we press into this again we're going to see done here.
We could also have a return key type of Go
and let's try to rerender this keyboard and you're going to see Go here instead.
You could use the Go key when the input is used for a search or other action.
You could also use a return key type
of Next for example, and this would typically be used when
the input is part of a form with multiple fields.
And then you could also use
a search value for the return key type and let's rerender
our keyboard again and you can have search here.
And this is typically used when the input is used for searching.
That's a basic overview of the text input component in react native.
Thanks for watching and see you in the next video.