1
00:00:02,390 --> 00:00:05,610
So step-by-step we're making progress,

2
00:00:05,660 --> 00:00:08,150
what we're not able to do is enter a number.

3
00:00:08,150 --> 00:00:14,090
Well I guess technically we can enter a number if we kind of find the input field, here it is but it's

4
00:00:14,090 --> 00:00:17,920
not much fun to search for it, it would be nicer if you could see it, wouldn't it?

5
00:00:18,680 --> 00:00:22,270
So therefore let's style that input field,

6
00:00:22,280 --> 00:00:30,470
that text input field here a little bit and just as before actually, I went to do that in a separate

7
00:00:30,470 --> 00:00:31,260
component.

8
00:00:31,310 --> 00:00:40,520
So in the components folder, I'll add my own input.js file and in there, as always import React from

9
00:00:40,520 --> 00:00:46,580
React and then import text input from React Native

10
00:00:46,580 --> 00:00:51,970
and here I'll actually not need the view because we'll just have the text input here in style and configured

11
00:00:51,970 --> 00:00:59,880
in there and then have the input constant here which is our functional component, which we in the

12
00:00:59,880 --> 00:01:01,980
end also export of course

13
00:01:02,280 --> 00:01:08,550
and one thing we'll need for sure is the stylesheet because that should now be styled here so

14
00:01:08,550 --> 00:01:13,710
that we have one default input look we could reuse in this application if we needed multiple inputs

15
00:01:13,710 --> 00:01:15,120
in different places

16
00:01:15,120 --> 00:01:20,130
and that's really the mindset you have to get into, create reusable components so that you don't have

17
00:01:20,130 --> 00:01:26,460
to copy code around or repeat yourself but that you can easily share your components and easily create

18
00:01:26,460 --> 00:01:32,700
the apps you want from your set of building blocks you create on your own in the end.

19
00:01:32,700 --> 00:01:41,650
So here, my styles object with Stylesheet.create, like that, looks good and now in that component,

20
00:01:41,710 --> 00:01:44,230
I want to return a text input,

21
00:01:44,230 --> 00:01:46,990
so this built-in text input.

22
00:01:46,990 --> 00:01:49,830
Now of course, my idea is that we can style it from in here,

23
00:01:49,870 --> 00:01:58,180
so let's assign a style from in there but just as with the card, it would be nice if we could also set

24
00:01:58,180 --> 00:02:05,200
some styling from outside, like a special width or a special border, anything like that. To enable that,

25
00:02:05,380 --> 00:02:08,050
again I'll pass an object here to style

26
00:02:08,050 --> 00:02:14,470
and for one take all my styles set up in my styles object and there let's say in an input property

27
00:02:14,470 --> 00:02:23,970
which we have yet to add and in addition, also add all styles we are getting from props style so that

28
00:02:23,970 --> 00:02:30,060
we could set styles from outside as well and now down there in stylesheet, we can add the input style

29
00:02:30,060 --> 00:02:37,180
to assign some style to the input. So here, we could give this a height of let's say 30 which should

30
00:02:37,180 --> 00:02:43,420
be a height that looks relatively good and to see something, I also want to add a border at the bottom.

31
00:02:43,450 --> 00:02:49,120
You could also add a border around the entire input with border color and border width and so on

32
00:02:49,310 --> 00:02:54,970
but I like that look where we only have a border below the input but that's of course totally subjective

33
00:02:55,060 --> 00:02:59,120
and something you can set up according to your personal preferences.

34
00:02:59,250 --> 00:03:06,160
A border at the bottom only can be set with border bottom color and there I'll go with grey, another pre-built

35
00:03:06,160 --> 00:03:16,110
color which we can use with that shortcut and give this border bottom also a width here of one, add a margin

36
00:03:16,110 --> 00:03:22,680
vertical of 10 to have some spacing around the input, at least to the top and bottom 

37
00:03:22,890 --> 00:03:26,380
and now with that, the base styling for this text

38
00:03:26,400 --> 00:03:28,170
input is done,

39
00:03:28,170 --> 00:03:36,660
now let's use that in the game screen. So in there, I want to import my own input from the components

40
00:03:36,660 --> 00:03:39,890
folder input, like that

41
00:03:40,930 --> 00:03:46,690
and replace this text input here with my own input which in the end wraps this built-in text input of

42
00:03:46,690 --> 00:03:47,440
course.

43
00:03:47,500 --> 00:03:48,510
So use my own input,

44
00:03:48,510 --> 00:03:52,300
get rid of the text input input up there which we don't need anymore

45
00:03:52,600 --> 00:03:59,370
and now if we save this, we see it a little bit but it's very small, you can barely see it here

46
00:03:59,410 --> 00:04:04,600
on iOS and it gets bigger as you type though which is certainly not what we want of course.

47
00:04:04,900 --> 00:04:06,590
We're of course not done,

48
00:04:07,200 --> 00:04:09,290
instead to style the width,

49
00:04:09,300 --> 00:04:10,950
I'll go to the start game screen,

50
00:04:10,980 --> 00:04:14,460
so to the place where we use the input and set up the styling here

51
00:04:14,460 --> 00:04:19,200
because for me it makes sense that we have some general styles which we always want in the input component,

52
00:04:19,380 --> 00:04:24,720
something like the height or the border but some specific styles, like how big should it be, so how broad

53
00:04:24,720 --> 00:04:25,230
should it be,

54
00:04:25,350 --> 00:04:28,480
that's something you want to set up in the place where you actually use it

55
00:04:28,650 --> 00:04:36,150
and therefore here, I'll add this input property in the start game screen stylesheet object and maybe

56
00:04:36,150 --> 00:04:42,360
use a width of 50 pixels here, that should look good and assign that to my custom input here with the

57
00:04:42,450 --> 00:04:43,760
style prop.

58
00:04:43,830 --> 00:04:51,840
So there, we can now point at styles.input and with that, it will be having that width at all times and

59
00:04:51,840 --> 00:04:55,380
if we type there, we don't make that broader anymore,

60
00:04:55,380 --> 00:05:00,040
instead we can then simply scroll automatically in that input.

61
00:05:00,150 --> 00:05:05,760
Now for this specific input, for this specific layout here, it would also be nice if the text would be

62
00:05:05,760 --> 00:05:06,500
centered

63
00:05:06,600 --> 00:05:12,330
I think, for most inputs you want that default behavior of writing from left to right and starting on

64
00:05:12,330 --> 00:05:13,220
the left edge

65
00:05:13,260 --> 00:05:20,480
but here I think some centered text would be nice and therefore in start game screen where I want to

66
00:05:20,480 --> 00:05:23,550
have this centering here, on this input,

67
00:05:23,660 --> 00:05:30,470
we can also add the text align property and set this to center and now this will center this text here

68
00:05:30,470 --> 00:05:32,330
in the middle as we type

69
00:05:32,330 --> 00:05:35,830
and that's really nice for just entering a number then, like this.

70
00:05:36,920 --> 00:05:40,260
Speaking of that, right now we can enter anything in there,

71
00:05:40,550 --> 00:05:45,980
so we certainly need to configure this input and for that if I go to the input component where we use

72
00:05:45,980 --> 00:05:52,250
the text input, there is a lot of stuff we can configure there and actually the best resource is always

73
00:05:52,250 --> 00:05:59,030
of course the official documentation. There in the API docs, if you go there and you search for the

74
00:05:59,030 --> 00:06:05,990
text input, you'll find not only an explanation but you'll also find all the props you can set there

75
00:06:06,320 --> 00:06:09,230
and you can set things like is it multiline or not,

76
00:06:09,230 --> 00:06:11,100
how long may the text be.

77
00:06:11,330 --> 00:06:13,730
You can also set a placeholder text,

78
00:06:13,730 --> 00:06:18,700
you can set autocorrection and all that fun stuff,

79
00:06:18,770 --> 00:06:25,670
so definitely check these docs to find the specific property you might need for your use case.

80
00:06:25,730 --> 00:06:31,970
I want to be able to set these props but I want to be able to set them from the place where I use

81
00:06:31,970 --> 00:06:37,640
my custom input. So not from in here because that would make sure that we use the same configuration for

82
00:06:37,730 --> 00:06:40,150
all inputs we might have in our app,

83
00:06:40,430 --> 00:06:46,550
I want to have more flexibility and just set up some base styling in here and configure the input in

84
00:06:46,550 --> 00:06:51,440
the place where we then use it instead of in the core wrapper component.

85
00:06:51,440 --> 00:06:57,140
The cool thing is React and that's not React Native, that's just React in normal Javascript has a syntax

86
00:06:57,140 --> 00:06:58,200
for that.

87
00:06:58,460 --> 00:07:05,920
You can take your props you're getting and spread them on your component like this.

88
00:07:05,920 --> 00:07:11,110
The syntax might look a bit strange but what it in the end does is it takes all the props you have,

89
00:07:11,140 --> 00:07:19,120
all the props you set here and basically adds them to your component as props.

90
00:07:19,150 --> 00:07:23,600
Now if you thereafter define other props like style and you already got a style here,

91
00:07:23,650 --> 00:07:26,020
this style will override the style you've got here and

92
00:07:26,040 --> 00:07:31,210
that's actually what I want because if I set a style prop on my own input from outside, I definitely

93
00:07:31,210 --> 00:07:37,450
want to override this with this style prop and add this styling which is set up down there to this text

94
00:07:37,450 --> 00:07:38,200
input

95
00:07:38,200 --> 00:07:43,630
but if you set other props outside of this component, so on my custom component, then they will be added

96
00:07:43,630 --> 00:07:49,010
to the text input and that allows us to add all the props we can add on the text input

97
00:07:49,120 --> 00:07:52,120
also on our input, so on our own component.

98
00:07:52,120 --> 00:08:03,400
So here where we use input, we can now not only add the style but we can also add blurOnSubmit for

99
00:08:03,400 --> 00:08:09,670
example to make sure that when we press the submit button there, we lose focus and we close the soft

100
00:08:09,670 --> 00:08:16,430
keyboard. We can set autocapitalize to none which is one of the allowed values there

101
00:08:16,480 --> 00:08:20,040
if you check the docs. You can set it to none, sentences, words and so on,

102
00:08:20,050 --> 00:08:24,610
so I don't want to have capitalization turned on here because we'll just enter number but also because

103
00:08:24,610 --> 00:08:30,610
I want to show you different configurations you can set. I'll set autocorrect here to false so that

104
00:08:30,610 --> 00:08:35,050
we're not auto correcting the user input and very important here,

105
00:08:35,080 --> 00:08:41,000
I'll set the keyboard type to numeric, so that the user has to enter a number here.

106
00:08:41,320 --> 00:08:47,590
I'll set the max length here to 2 so that you may only enter two digits and not a very long number because

107
00:08:47,620 --> 00:08:53,890
this game here and it's just one of the restrictions I have here, is that this game only works with a two-digit

108
00:08:53,890 --> 00:08:57,140
number. With all of that set up,

109
00:08:57,140 --> 00:09:02,990
now if we go back and I toggle my soft keyboard, you see you get that number keyboard here and you

110
00:09:02,990 --> 00:09:09,180
can only enter two digits there and not more than that, which is of course exactly what I want.

111
00:09:09,260 --> 00:09:14,170
In addition, here on Android we see this, if you click the confirm button, this will close it,

112
00:09:14,180 --> 00:09:21,140
that's thanks to that blurOnSubmit thing. On iOS, such a button doesn't exist here so there, we'll actually

113
00:09:21,140 --> 00:09:25,730
have to find a different solution for closing this if you tap somewhere else for example because right

114
00:09:25,760 --> 00:09:27,150
now, that's not happening.

115
00:09:27,320 --> 00:09:32,090
But the good thing is we now have a keyboard we can see and a keyboard where we can enter numbers.

116
00:09:32,090 --> 00:09:37,910
One thing I want to change though is that right now, I can also enter a decimal separator here.

117
00:09:37,910 --> 00:09:44,420
Now to get rid of that, you can change the keyboard type to number pad and to see all available

118
00:09:44,420 --> 00:09:49,650
keyboard types, as always the official docs are the place to go, there for the text input, you can dive into

119
00:09:49,650 --> 00:09:54,650
a keyboard type and find out what you can set, what works on all platforms and what you could set if

120
00:09:54,650 --> 00:09:59,480
you would have a check that checks on which platform you are running the code which we haven't learned about

121
00:09:59,480 --> 00:09:59,990
yet.

122
00:10:00,230 --> 00:10:03,200
Number pad is supported on both platforms though

123
00:10:03,350 --> 00:10:08,380
and if you set this, you now have an input where you can't enter a decimal place here,

124
00:10:08,390 --> 00:10:13,990
if you type in here and you can't do it on iOS. On Android, you unfortunately can though,

125
00:10:14,090 --> 00:10:16,490
so there we'll also have to find a different fix.