So for does error message in the input component.
We're getting the text from outside, but I want to control the style from inside.
So here in the end, I will wrap this text here in a view component simply to have more styling options,
you could say, and assign the style here of air or container maybe, and on the text itself, all assign
a style of air or text.
But these identifiers, as always, are totally up to you.
I also don't always want to show this if it's invalid, but instead I want to show it if it's invalid
and.
This input has been touched.
That's why I'm managing this touched state so that the user at least has a chance of entering something
before I yell at him.
So now our container and our text can be added.
And of course, you are totally free to stall this in whatever way you want.
I'll give the container a margin vertical of, let's say, five, and then for the air or text here
again, up to you.
I will assign a font family of open sans here, a color of red maybe, and a font size.
Of.
Fourteen to have it a little bit smaller or 13.
And that was that what you'll see if this reloads and let's test this on Android as well, of course,
not just on iOS.
So if we wait for this to load on Android.
There we go to Admon.
And unfortunately, the Android emulator is a bit slower, which is why this takes a bit longer and
we.
Add a new product here now, first of all, to try to submit it like this, I get an error as it should
be the case.
And if I start entering here.
I can do that, however, please note that after a touch to image and input, if it's invalid, I get
an error.
That's exactly how it should be the case.
So I can enter all of this.
Now we have another issue, my keyboard is overlapping the description and puts it we'll have to fix
this, first of all.
Let me enter something valid into all the other inputs, even if it's an invalid, immaterial, we're
not checking whether it's a valid you are here just whether it's some text at all.
So I don't care about the exact you are validation here.
Of course, you could add a regular expression check for this, but now I'll just enter some valid input
into all these fields and to crofter if I had Savir.
This has saved.
And also can be found here at the bottom.
And it did create two year one behind the scenes, but this is where it is coming from.
Let's now make sure that we can also reach all inputs and for this back and he added products green,
I'll use a component which you already saw earlier in the course.
I'll remove these two imports, which we don't need anymore, and instead at the keyboard avoiding view
to make sure we can always reach all our inputs and now does keyboard avoiding view here can be used
in the added products green.
You can be wrapped around our scroll view like this.
Around the entire Skrull view.
And there you might not want to play around with how you configure disregarding the behavior, you can
all use the platform API to use a different behavior for different platforms.
All will try padding here and add a keyboard vertical offset of, let's say, one hundredths to add
a lot of padding so that we really move up all the inputs quite a bit because they're rather large with
a label.
We have the input itself, which isn't super small.
So I definitely want to move it up quite a bit.
And in addition and that's important, you need to add a style here and I'll quickly add a inline style
here.
Of course, you could also use to stylesheet and add flex one here and that's superimportant.
You need to add this to the keyboard avoiding view, which you wrap around your scroll view to have
an effect because it basically needs to reserved for itself the entire screen size.
There is a scroll view in there and that will still be able to scroll, but you also need that.
Now with that.
Let's give this a try on Android, but since this takes a bit to load, I'll also quickly have a look
at iOS.
And there you see, you still can scroll.
Unfortunately, your keyboard isn't even close to our description, by the way.
We can add multiple lines there as well, as you see.
But now let's have a look at our.
Android app here.
Go to the admin section there.
And in there, if I go to my description here, you see this is now moved up.
If I'm in the image you are El.
Typing some stuff there and I click into description.
This is reachable now, so now with that, we make sure that we can always reach all the inputs, which
of course is important in an application, you want to make sure that you can reach all your inputs.
We're validating the data, we're saving the data, and we're doing this in a highly reusable way.