So for that as mentioned, I'm back in the project we worked on and of course now the edit product screen
here is what I'm interested in,
this is the screen where I have these text inputs here with my labels and then the text input, where
we currently have a very basic input handling,
we are at least fetching the user input and storing it with the help of the React state, with the use
state hook,
we're then feeding the Android values back into the input and that's it.
This allows us to capture and use the user input but for one, we can improve how we do that, we can write
this in a more reusable way and we're not doing any validation whatsoever,
so these are the things I want to change in this module.
In addition, we also are not configuring our inputs in any way,
that means that right now all text inputs are equal.
We don't change the type of keyboard we're presenting,
we're not offering multiline input for example for longer texts like here for the description,
none of that is happening and therefore let's actually start with configuring these inputs before we
move on to validation and so on. One important configuration which you can add to your keyboards is the keyboard
type. The keyboard type prop can be set and there you've got a couple of values available. Now you've
got quite a bit of values here but the official docs are also a place which you should consult when thinking
about the type you want to assign here because when visit the official text input documentation, you of
course see some examples but then you also see all the props you have and there, you can learn more about
each prop and how you may configure it and for the keyboard type
for example, we learned that only these types are supported cross platform.
So whilst we have specific iOS and Android types available, these types can only be used together
with a platform check
so that you make sure you don't use the type on Android which isn't supported there and which therefore
wouldn't have any effect.
Hence, I will stick to the cross platform types, so that I don't have to add an extra platform check and there,
typically for let's say normal text, we would stick to default which of course therefore is a type we
don't have to assign but that for example changes when we have a look at our price input. There I want
to make sure that people only enter valid numbers, that they don't enter any text and therefore of course
I want to show the right keyboard to help them with this
and if we have a look at the official documentation, we see that there are three main cross platform
types of keyboards we can show - number pad, decimal pad and numeric and there for example decimal pad is an
input which allows the user to enter decimal numbers which is just what I want here for my price. So
therefore setting this keyboard type here makes a lot of sense because now if we have a look at this
price input here and I toggle the soft keyboard which you can do with the command k shortcut here on
iOS or with the hardware menu up there, then keyboard, toggle software keyboard, you see that
now I got this decimal keyboard opening up here whereas on the other inputs, I have a normal text keyboard
and of course, that's the same on Android.
If we go to admin there and then have a look at the price, we also see that there, we're presented with
this number friendly input instead of the normal text keyboard which we get on the other input fields.
So this is how we can configure this and this is of course an important configuration. We can also configure
other things, for example here on the title input here.
If you hit control space and you have a look at the autocompletion, you see there are a bunch of things
you can configure, for example whether this should be auto capitalized. There you have different values
which you can set, for example that character should be capitalized, only full sentences or words and
here, I'll go for full sentences for example to help with capitalizing those.
You also can turn on autocorrection and by adding it like this, you ensure that auto correction is
turned on for this input, by setting it to false, you could disable it or by just omitting it of
course, that's also an option and so on. There are a bunch of things you can configure and I would strongly
recommend as always that you have a look at the official docs as well to learn about the available configuration
options and what they do,
also simply play around with those so that you get an idea for what you can do there and what each option
does and what might make sense for your next application. One other value which I want to set for
example is the return key type.
This can be set to a couple of values
and again if you check the official docs, you will learn that not all values are available on all platforms,
only these five are available cross platform and there, you can basically configure this button in the
bottom right corner. If you have a look at your input here
and you click into any of the inputs, it's this button here in the bottom right corner which says return
here for the imageUrl. Now on the title, I set it to next,
so if you click into the title field, you now see here it says wider, which is German for next and this
is just because I have a German emulator here and let me also restart this on Android because it crashed
there so that I can show it there as well.
If we go to our input there, click into the title, you see this next button here, on the imageUrl, you
have this done button here and that can be configured with the return key type, though
please be aware that this only controls how this is displayed, what it says there, what's the label
on there or which kind of button is presented,
it does not automatically change what this button does, for example if I click the wider button, this
keyboard closes,
the same is true if I click the return key here.
Now when we talk about behaviors of text inputs, then all the events we can listen to are interesting.
With on, you get an idea of all the events you can listen to and
for example there you got onBlur which fires whenever an input loses focus, onChange would fire, so
on every keystroke and gives you the full input event, onChangeText which also fires on every keystroke
but only gives you the text which was entered which typically is what you're more interested in though.
onEndEditing where we can also get an idea for when this fires, so if I enter onEndEditing here, let's
see when this prints in the console,
if I now go here to my input and please note I'm on the title input, so if I type there test, we see it didn't
fire here, if I click out of this,
now it fired onEndEditing. The same is true if I click the wider button here for example,
so basically whenever we leave this keyboard with the focus or in general when we click that done
button there as well.
In addition, we also have other listeners, for like onFocus which obviously fires when this input gains
focus or also onSelectionChange when we select text in there or onSubmitEditing which is fired
when this return button is clicked, so
if I add onSubmitEditing here, when I add this listener as well and also add a console log statement,
you see that
now this will fire, whenever I type in here, does not fire, whenever I click out of here,
it also doesn't fire,
we only get the onEndEditing log here but it will fire if I press the wider key here,
there you see onSubmitEditing,
so this is a listener you would use to listen to when the return key is clicked and then you can do
whatever you want to do, like submit your data or automatically move the focus to the next input with
the help of references for example if you want to.
This is how you can configure this and as I said, I would recommend that you dive into this to get a
feeling for how this works,
I now will move on however and I want to make sure that we don't just listen to inputs and store
the values but that we also validate what the user enters.