OK so now you're going to talk about handling inputs of course like you will do for react for Webb or
any Webb you will provide an input to the user so they can enter semi formation and then we can do something.
So of course with HREOC native we get a way to create native inputs.
If you go to the docks and you search for text input.
This is the documentation you get some examples.
We're going to talk about this and actually we going to do it right here.
So notice that on documentation you can get a section with components and all the components you get.
Of course we are not going to do all of them.
We're gonna do the most important ones.
OK.
So I'm gonna go back and for this we can need a component.
And now if I take a look at my emulator it's a little bit messy.
So I'm going to comment this out because we are not going to really use it.
And then I'm gonna just create a new input called a new file called input that jazz and we can pretty
much handle everything from there.
I can go at the top get a copy I'm going to paste and pretty much the same thing with this.
So I'm going to go here.
I'm gonna call this input.
You could call this whatever you want doesn't matter.
And then of course the usual stuff I'm gonna close it.
Then we just need to render open and close and a return.
All right.
Now of course we're going to return some jazz sex and for now I'm just going to returns and some text
within a view maybe.
So let's do The View first view and inside some text saying I don't know.
Hello.
So we can we are gonna include this input component onto the app within the app.
So I'm just writing something so we can confirm that we are importing correctly.
So then export default and then of course we call it input and just to do pretty much everything right
now I'm gonna just copy an instance of styles because we are gonna use it later and I'm gonna put it
right here.
All right.
For now it's just empty.
Now if I go to app we need to import this input at the top like the other ones.
So import again just gonna call it input from DOT for Slash dot for Slash as our forest lodge.
And then input.
And if we make a reference to this I'm gonna go down the bottom and may be included here.
All right.
So we get input and now at the top you're doing you we are doing text and for now she's going to come
this out.
All right.
So I'm gonna reload the application and we get Hello.
So you know let's get really simple stuff right.
So now Hogan how can we create text inputs.
Well right here on the dogs we get the component.
So the name of the component it's text input.
Right.
Pretty simple.
So I'm gonna go over here at the top and of course since this is a component we need to include it so
text and then input.
Now I'm going to copy this.
I'm going to go here and instead of just maybe returning a view I'm just gonna say text input and that's
it.
That's the only thing I'm gonna do I'm gonna save it.
I'm gonna go to the simulator and run it again.
Gonna bring both.
I'm going to redo the application and you know we can get nothing.
Now if you kind of a select something right here you know we get nothing.
And it is by default how it looks on AOS.
So we go to Android and we you know double tap we might be getting something different but you know
we get nothing.
And this is because the text input comes pretty much with nothing in sight.
Let's go right here.
Of course with text input we get a lot of props and a million props.
Let me go.
At the bottom.
If you scroll all the way down you're gonna see all the props that we can do a lot of things with with
the inputs.
You know you should stuff most of this props.
They could have a make sense no out to capitalize.
Or maybe on blur or on change you know the usual stuff you get four inputs on Web.
Now right now of course we are getting nothing because we have nothing.
And by default this is how it looks.
It's going to add a state right here state going to open and close and I'm gonna do my text input.
Now you can not really handle the state or the values if you're not using state or a managed text input.
So for now I'm just going to say I don't know Frances I'm going to go to the text input and I'm going
to say that this one has a value.
So of course the value is going to be and this works just like for web it's going to be the value of
the input.
So we have this that state that might text input.
Now if I below the application you know we can get it.
Now if I select it now we get something the way without adding the value the actual the actual input
was already there.
The thing is that it's seen since since it's not visible we cannot really select it you know because
we don't know what it is.
So if I reloaded on Android we get pretty much the same behavior you know pretty pretty cool.
Now the cool thing with this is that you get a prop for styles.
Let me find it right here.
You can add styles to the input.
So let's go back.
Gonna go right here and just gonna make a reference to the styles.
Right.
So I'm gonna say style equals and then we can add some styles and then I'm going to call it Know input
and now it's time to uncommon this one.
And you know give some styles so I'm going to say input open it close and first I'm going to make it
100 percent so you know full width and I'm going to add a background color so we can see it.
So background and then color.
I'm not getting the able to complete something sometimes fails.
So I got to give it an EF 2 EF 2 EF 2 and then maybe a margin top right.
So I'm gonna give it 20.
I'm gonna reload it and see what happens.
Oh OK.
We get pretty much same thing and it's because maybe I made a mistake with this.
Of course it is tiles all right.
So we reloaded and you know ugly.
But you know much much better
so sometimes with the when the when you get the Android and you select something right here you're going
to try to do the double tap.
Ah.
And it will not reload.
It's going to try to you know enter some information.
So for this one of course you will need to either close the keyboard and do double R and you can get
the same problem.
So in this case with Android you do command and then the m and you do reload and then it's going to
reload.
So as you can see the styles for both are a little bit different.
We are pretty much doing the same thing but they look different.
And this is actually pretty normal because this is a native input for ISIS and this is a neat native
input for Android.
They look different right and that's normal.
Later we're going to see how we can target different styles for different devices.
You know we can write one style for Android and a different one for you know eyes but we are not there
yet.
So what I want to do right now is just to use this text input so I'm going to go right here and just
add a function called on change input.
And this one is going to be just a function just a function.
And for now we're just going to alert something you know just to make sure we are triggering to bring
the on change input.
So how can we on you know triggered this.
So go to the docs.
Of course you get the armed blur and then you get the on change and on change text.
So this ones are similar the on change in the on changed text but they are a little bit different.
So the UN change is going to trigger when you make a change on the input but that set is just you know
it's going to run a function is not going to pass you the value and anything else is just going to run
a function it's kind of like a callback then you get the unchanged text and it's pretty much like the
on change it will fire every time you change the input but it will pass whatever is done your type in
the string.
So I'm going to go here and use that one.
So on change and then text.
Now on this one we don't need to parse the U.N. We don't need to do anything we just need to make a
reference to the function that we want to run in this case on change input.
So this one just like any other function will get an event.
All right.
And inside the event we get only one thing which is what is the user typing right here on the screen.
So you know I'm just gonna save it for now.
I don't want to use the console.
Sorry for that I want to use the console.
I'm going to go here and just update the state and we can see it working.
So this starts that state opening close and I can say OK I want to go to my text input open close and
I'm gonna put the event you know as value for that one.
All right.
So since we are updating the text input of course this one is going to start empty.
We're going to update the text input and the text to input it's equal to whatever value we have right
here.
You're gonna be able to you know enter some information to that input in a more managed way.
So if I go to the simulator reloaded I selected and type Francis then works.
Right.
So this is the usual way we get to enter or manage inputs we react.
And I'm not just talking about react native I'm talking about any react application so let's do things
a little bit better.
I'm going to wrap this into a view and I'm going to give some stylings to this because right now is
really ugly.
And so we're gonna do a couple of things with this so we can practice different things.
And I'm gonna add some styles so I'm gonna say styles dot input on our input rubber or not.
All right.
I got a copy.
I'm gonna go right here and say input wrapper.
Right.
So what I'm gonna do it so you know pretty dumb.
Pretty dumb stylings.
I'm just gonna do width of one hundred percent.
That's it.
That's the only thing I'm gonna do right now and I'm gonna add some things to the input.
I'm still sticking to keep the 100 percent.
The background color stays the same.
The margin top state stays the same.
And since they are look pretty different just to you know kind of a make a standard and this I'm just
gonna at the font size make it a little bit bigger and add a padding so we can get some padding on ISIS
of course and Android we don't need it but you know that's OK.
I'm gonna reload the application now on ISIS we get something a little bit better.
And same thing on the Android.
So let's do again command em.
So working with the with the Android tools of the Android device you know the Android it's not like
it's not I don't really like it.
It's not that good all right.
So now we get pretty much the same thing.
That's right.
Now if we check the documentation of course we get a lot of things.
We're just going to show you a couple of this ones.
Then of course you will need to go on your own and you know just check the documentation.
But most of them are just self explanatory.
Place holder you know place holder text color.
You know it's pretty simple principle now going to show you a couple of ones that are really interesting.
For example you get a multi line and we find it multi line right here.
So with the multi line you can ride you can pretty much use a text input kind of like a text area.
Let me just show you multiplying.
I'm going to say equal to I don't know.
True of course of course this takes a boolean.
So I'm going to reload the application.
I'm going to start you know type in things I'm going to type a little bit more and then of course this
one instead of you know making the input bigger or just staying behind the scenes is going to go and
you know a new line.
So multiply again all the prompts date kind of a make sense.
All right.
What else we can for example limit the length you know like we will do would react for web application.
I'm going to say just five.
And if I type five I'm not allowed to type anymore resemble.
Then you get the disabled and this one.
You know this could be the same old.
I don't know why why they just did it with it did it EDIT Full editable or something like that editable
false.
So this is the disabled true or disabled false we get with a you know web application if I type to try
to type something nothing happens and if I change it to true you know we can do it.
And of course in real life we would just manage this through state after something happens if you want
to disable the form or disable the input we just pass edit file for false.
Now there's another one which is very cool is the auto capitalize.
Very good.
So on this one we have different properties we can use.
Right here we get characters we get non of course.
It just just disable and we get sentences and get worse.
Now the with the the thing is that we get the out to capitalize it's because sometimes the device will
do the outlook utilized by default.
So maybe you don't want that because I don't know you're entering the email.
So you're gonna make the first letter a capital letter.
So if you say non of course this will not happen on some devices.
Now of course you can do a little bit more so you get the words words just like this.
I'm going to save it.
And of course I'm going to type I'm going to make a space and if I type a new word it can happen.
Let me just disable or maybe make it make a little bit bigger so.
OK.
Space and space and space and space.
Right.
So you get the first letter of each word in a capitalized so then you get sentences for example or you
get characters and this is you know pretty much all.
So I'm going to redo the application to go and we get everything in a capital letter so you know you
get you get a lot of things with this.
I don't I don't want to do a lot.
You know maybe a lot explaining because they kind of make sense and they work just like we act for Web
site when you go to the next section and we can add.
What were you going to do with and just explain you first.
We're going to add a button right here on the bottom.
And every time we click it we're going to add a new value and of course you can render it through state
on the on the screen and and the main point of that is that we can get an issue a problem and then you
know once you know what the problem is I'm going to tell you of course how to fix it but first we need
to generate or create something to create that error message or that that behavior.
All right.
So let's go to the next one and add some you know some entries right here.