1
00:00:02,260 --> 00:00:07,540
So for that as mentioned, I'm back in the project we worked on and of course now the edit product screen

2
00:00:07,540 --> 00:00:09,640
here is what I'm interested in,

3
00:00:09,640 --> 00:00:16,060
this is the screen where I have these text inputs here with my labels and then the text input, where

4
00:00:16,060 --> 00:00:19,540
we currently have a very basic input handling,

5
00:00:19,540 --> 00:00:25,390
we are at least fetching the user input and storing it with the help of the React state, with the use

6
00:00:25,450 --> 00:00:26,460
state hook,

7
00:00:26,560 --> 00:00:30,200
we're then feeding the Android values back into the input and that's it.

8
00:00:30,310 --> 00:00:37,210
This allows us to capture and use the user input but for one, we can improve how we do that, we can write

9
00:00:37,210 --> 00:00:42,730
this in a more reusable way and we're not doing any validation whatsoever,

10
00:00:42,760 --> 00:00:46,510
so these are the things I want to change in this module.

11
00:00:46,530 --> 00:00:50,850
In addition, we also are not configuring our inputs in any way,

12
00:00:50,940 --> 00:00:53,850
that means that right now all text inputs are equal.

13
00:00:53,850 --> 00:00:57,140
We don't change the type of keyboard we're presenting,

14
00:00:57,270 --> 00:01:02,910
we're not offering multiline input for example for longer texts like here for the description,

15
00:01:02,910 --> 00:01:08,370
none of that is happening and therefore let's actually start with configuring these inputs before we

16
00:01:08,370 --> 00:01:15,120
move on to validation and so on. One important configuration which you can add to your keyboards is the keyboard

17
00:01:15,180 --> 00:01:21,420
type. The keyboard type prop can be set and there you've got a couple of values available. Now you've

18
00:01:21,420 --> 00:01:26,970
got quite a bit of values here but the official docs are also a place which you should consult when thinking

19
00:01:26,970 --> 00:01:33,230
about the type you want to assign here because when visit the official text input documentation, you of

20
00:01:33,230 --> 00:01:38,270
course see some examples but then you also see all the props you have and there, you can learn more about

21
00:01:38,270 --> 00:01:41,450
each prop and how you may configure it and for the keyboard type

22
00:01:41,450 --> 00:01:46,010
for example, we learned that only these types are supported cross platform.

23
00:01:46,160 --> 00:01:52,080
So whilst we have specific iOS and Android types available, these types can only be used together

24
00:01:52,130 --> 00:01:53,750
with a platform check

25
00:01:53,750 --> 00:01:58,310
so that you make sure you don't use the type on Android which isn't supported there and which therefore

26
00:01:58,310 --> 00:01:59,560
wouldn't have any effect.

27
00:02:00,230 --> 00:02:06,430
Hence, I will stick to the cross platform types, so that I don't have to add an extra platform check and there,

28
00:02:06,440 --> 00:02:11,600
typically for let's say normal text, we would stick to default which of course therefore is a type we

29
00:02:11,600 --> 00:02:18,110
don't have to assign but that for example changes when we have a look at our price input. There I want

30
00:02:18,110 --> 00:02:24,860
to make sure that people only enter valid numbers, that they don't enter any text and therefore of course

31
00:02:24,860 --> 00:02:27,850
I want to show the right keyboard to help them with this

32
00:02:28,130 --> 00:02:33,170
and if we have a look at the official documentation, we see that there are three main cross platform

33
00:02:33,350 --> 00:02:40,460
types of keyboards we can show - number pad, decimal pad and numeric and there for example decimal pad is an

34
00:02:40,460 --> 00:02:46,250
input which allows the user to enter decimal numbers which is just what I want here for my price. So

35
00:02:46,250 --> 00:02:50,660
therefore setting this keyboard type here makes a lot of sense because now if we have a look at this

36
00:02:51,080 --> 00:02:58,460
price input here and I toggle the soft keyboard which you can do with the command k shortcut here on

37
00:02:58,520 --> 00:03:07,340
iOS or with the hardware menu up there, then keyboard, toggle software keyboard, you see that

38
00:03:07,340 --> 00:03:12,860
now I got this decimal keyboard opening up here whereas on the other inputs, I have a normal text keyboard

39
00:03:13,220 --> 00:03:14,750
and of course, that's the same on Android.

40
00:03:14,750 --> 00:03:20,590
If we go to admin there and then have a look at the price, we also see that there, we're presented with

41
00:03:20,590 --> 00:03:26,200
this number friendly input instead of the normal text keyboard which we get on the other input fields.

42
00:03:26,480 --> 00:03:33,840
So this is how we can configure this and this is of course an important configuration. We can also configure

43
00:03:34,010 --> 00:03:38,840
other things, for example here on the title input here.

44
00:03:39,060 --> 00:03:43,950
If you hit control space and you have a look at the autocompletion, you see there are a bunch of things

45
00:03:43,950 --> 00:03:49,560
you can configure, for example whether this should be auto capitalized. There you have different values

46
00:03:49,560 --> 00:03:55,590
which you can set, for example that character should be capitalized, only full sentences or words and

47
00:03:55,590 --> 00:04:01,020
here, I'll go for full sentences for example to help with capitalizing those.

48
00:04:01,140 --> 00:04:07,350
You also can turn on autocorrection and by adding it like this, you ensure that auto correction is

49
00:04:07,350 --> 00:04:12,540
turned on for this input, by setting it to false, you could disable it or by just omitting it of

50
00:04:12,540 --> 00:04:18,120
course, that's also an option and so on. There are a bunch of things you can configure and I would strongly

51
00:04:18,120 --> 00:04:23,730
recommend as always that you have a look at the official docs as well to learn about the available configuration

52
00:04:23,790 --> 00:04:25,930
options and what they do,

53
00:04:25,980 --> 00:04:32,400
also simply play around with those so that you get an idea for what you can do there and what each option

54
00:04:32,400 --> 00:04:40,090
does and what might make sense for your next application. One other value which I want to set for

55
00:04:40,090 --> 00:04:42,580
example is the return key type.

56
00:04:42,580 --> 00:04:44,920
This can be set to a couple of values

57
00:04:44,980 --> 00:04:50,350
and again if you check the official docs, you will learn that not all values are available on all platforms,

58
00:04:50,440 --> 00:04:56,260
only these five are available cross platform and there, you can basically configure this button in the

59
00:04:56,260 --> 00:05:00,130
bottom right corner. If you have a look at your input here

60
00:05:06,070 --> 00:05:12,090
and you click into any of the inputs, it's this button here in the bottom right corner which says return

61
00:05:12,090 --> 00:05:15,950
here for the imageUrl. Now on the title, I set it to next,

62
00:05:15,960 --> 00:05:21,870
so if you click into the title field, you now see here it says wider, which is German for next and this

63
00:05:21,870 --> 00:05:27,770
is just because I have a German emulator here and let me also restart this on Android because it crashed

64
00:05:27,770 --> 00:05:29,660
there so that I can show it there as well.

65
00:05:30,730 --> 00:05:36,280
If we go to our input there, click into the title, you see this next button here, on the imageUrl, you

66
00:05:36,280 --> 00:05:41,080
have this done button here and that can be configured with the return key type, though

67
00:05:41,080 --> 00:05:47,020
please be aware that this only controls how this is displayed, what it says there, what's the label

68
00:05:47,020 --> 00:05:49,150
on there or which kind of button is presented,

69
00:05:49,300 --> 00:05:55,150
it does not automatically change what this button does, for example if I click the wider button, this

70
00:05:55,150 --> 00:05:56,200
keyboard closes,

71
00:05:56,200 --> 00:05:59,990
the same is true if I click the return key here.

72
00:06:00,150 --> 00:06:05,040
Now when we talk about behaviors of text inputs, then all the events we can listen to are interesting. 

73
00:06:05,340 --> 00:06:09,190
With on, you get an idea of all the events you can listen to and

74
00:06:09,210 --> 00:06:15,350
for example there you got onBlur which fires whenever an input loses focus, onChange would fire, so

75
00:06:15,420 --> 00:06:21,090
on every keystroke and gives you the full input event, onChangeText which also fires on every keystroke

76
00:06:21,150 --> 00:06:25,230
but only gives you the text which was entered which typically is what you're more interested in though.

77
00:06:25,980 --> 00:06:35,000
onEndEditing where we can also get an idea for when this fires, so if I enter onEndEditing here, let's

78
00:06:35,010 --> 00:06:37,440
see when this prints in the console,

79
00:06:37,440 --> 00:06:46,710
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

80
00:06:46,710 --> 00:06:49,350
fire here, if I click out of this,

81
00:06:49,350 --> 00:06:54,930
now it fired onEndEditing. The same is true if I click the wider button here for example,

82
00:06:54,930 --> 00:07:01,920
so basically whenever we leave this keyboard with the focus or in general when we click that done

83
00:07:01,920 --> 00:07:03,890
button there as well.

84
00:07:03,960 --> 00:07:10,620
In addition, we also have other listeners, for like onFocus which obviously fires when this input gains

85
00:07:10,620 --> 00:07:19,640
focus or also onSelectionChange when we select text in there or onSubmitEditing which is fired

86
00:07:19,640 --> 00:07:21,860
when this return button is clicked, so

87
00:07:21,860 --> 00:07:30,820
if I add onSubmitEditing here, when I add this listener as well and also add a console log statement,

88
00:07:30,820 --> 00:07:31,390
you see that

89
00:07:31,390 --> 00:07:37,820
now this will fire, whenever I type in here, does not fire, whenever I click out of here,

90
00:07:37,960 --> 00:07:39,130
it also doesn't fire,

91
00:07:39,130 --> 00:07:45,600
we only get the onEndEditing log here but it will fire if I press the wider key here,

92
00:07:45,610 --> 00:07:47,290
there you see onSubmitEditing,

93
00:07:47,290 --> 00:07:52,870
so this is a listener you would use to listen to when the return key is clicked and then you can do

94
00:07:52,870 --> 00:07:59,230
whatever you want to do, like submit your data or automatically move the focus to the next input with

95
00:07:59,230 --> 00:08:03,090
the help of references for example if you want to.

96
00:08:03,200 --> 00:08:08,240
This is how you can configure this and as I said, I would recommend that you dive into this to get a

97
00:08:08,240 --> 00:08:10,370
feeling for how this works,

98
00:08:10,400 --> 00:08:16,160
I now will move on however and I want to make sure that we don't just listen to inputs and store

99
00:08:16,160 --> 00:08:19,460
the values but that we also validate what the user enters.