1 00:00:02,140 --> 00:00:06,630 Now we started working on the input and it doesn't look too bad but we want to make sure that users 2 00:00:06,630 --> 00:00:13,980 can only enter numbers that are digits only and that we can't enter a dot here or a comma or paste in 3 00:00:13,980 --> 00:00:16,440 some non-numeric content and for that, 4 00:00:16,530 --> 00:00:20,280 we of course need to validate what the user entered here. 5 00:00:20,550 --> 00:00:27,900 Now for validating what the user entered, I want to, as I showed it before already, basically saved the 6 00:00:27,900 --> 00:00:28,440 value 7 00:00:28,440 --> 00:00:33,510 the user entered on every keystroke and feed it back into the input but after every keystroke, I also 8 00:00:33,510 --> 00:00:39,000 want to validate the input to make sure that we're having a valid value there, 9 00:00:39,000 --> 00:00:44,770 so basically a number. For that first of all, we need to manage some state here in the start game screen, 10 00:00:44,860 --> 00:00:54,510 so I'll import use state and then up here at the beginning of this component, I'll set up my use state call, 11 00:00:54,520 --> 00:01:02,180 so register some state and that will be the entered value and even though that will be a number later, 12 00:01:02,300 --> 00:01:08,000 technically it is a string at the beginning because all input is just a string and you manually have 13 00:01:08,000 --> 00:01:09,080 to convert this to a number then 14 00:01:09,080 --> 00:01:15,170 if you want to. I will also add a set entered value function here, 15 00:01:15,170 --> 00:01:19,220 the second element we retrieve from that array use state gives us 16 00:01:19,430 --> 00:01:25,660 and now we can add a constant here which I'll name number input handler or whatever you want to name it. 17 00:01:25,700 --> 00:01:32,830 This will get the input text and that's the function because that's just a function I'm storing in this 18 00:01:32,830 --> 00:01:40,690 constant which I want to connect to my input and there to onChangeText, point at the number input handler 19 00:01:40,960 --> 00:01:43,930 and feed the value back in and that's our entered 20 00:01:43,930 --> 00:01:48,330 value. 21 00:01:48,420 --> 00:01:54,480 Now normally, we would just say set entered value in here and set the input text to be our new entered 22 00:01:54,480 --> 00:01:56,720 value which we feed back into the input 23 00:01:56,820 --> 00:02:01,220 but here, I'l actually first of all validate the input. 24 00:02:01,290 --> 00:02:06,300 So what I'll do here is I'll not set my entered value right to the text here, 25 00:02:06,330 --> 00:02:15,790 instead I'll set it to my input text where I replace and I can call replace because input text will 26 00:02:15,790 --> 00:02:22,450 be a string and that's a normal Javascript method that exists on strings, where I replace some content 27 00:02:22,450 --> 00:02:27,430 based on a regular expression. Now regular expressions can be scary but that's a simple one, we create it 28 00:02:27,430 --> 00:02:36,010 with two forward slashes and in there, I'll add square brackets and basically with this expression say 29 00:02:36,040 --> 00:02:45,250 that I'm replacing anything that's not a number 0 to 9, so not a number, globally in the entire 30 00:02:45,250 --> 00:02:51,630 text so that means it will not just look for the first hit basically but it will search the entire text, 31 00:02:52,850 --> 00:02:53,940 I will replace that 32 00:02:56,620 --> 00:03:02,440 with an empty string, so I'll basically drop any non-number of value. That's what's happening here and that's 33 00:03:02,440 --> 00:03:04,540 what I store in my new state and 34 00:03:04,600 --> 00:03:09,460 with that, we should make sure that the user can't enter anything which is not a number. 35 00:03:09,460 --> 00:03:11,410 So let's check this here on Android, 36 00:03:11,410 --> 00:03:16,720 if I press the comma, you'll see that instantly gets removed and that's exactly what we need here, 37 00:03:16,720 --> 00:03:19,960 we only allow number values. 38 00:03:19,960 --> 00:03:24,030 So that's a little bit of validation we have in place here, 39 00:03:24,030 --> 00:03:32,890 it's not all I want though but we're still not done with the input because on iOS, if we are in that 40 00:03:32,890 --> 00:03:37,410 input mode and we want to close that keyboard, right now that's not really doable. 41 00:03:37,420 --> 00:03:44,500 We can't click outside and close it and it would be nice if we could. Now to make sure that we can and 42 00:03:44,500 --> 00:03:47,960 that we close the keyboard if the user taps somewhere else, 43 00:03:48,160 --> 00:03:56,020 I will actually wrap the entire view here with a special component provided by React Native and that's 44 00:03:56,020 --> 00:03:58,490 the touchable without feedback component, 45 00:03:58,630 --> 00:04:04,960 so a component that allows us to register a touch listener without giving any visual feedback because 46 00:04:04,960 --> 00:04:07,060 that's exactly what we need here. 47 00:04:07,150 --> 00:04:11,080 We can wrap our entire screen with this, 48 00:04:11,080 --> 00:04:18,190 so our entire view can be wrapped with this touchable without feedback listener so that in there or 49 00:04:18,190 --> 00:04:24,070 on there, we can now register or listen to the press event and when a press happens, I want to dismiss 50 00:04:24,070 --> 00:04:30,010 the keyboard and for that, React Native gives us a useful API we can import from React Native and that's 51 00:04:30,010 --> 00:04:37,240 the keyboard API. That's now not a component but that's an API where we can interact with the native 52 00:04:37,240 --> 00:04:43,820 device itself so to say, in this case with the keyboard and here upon a press of this button, I want 53 00:04:43,820 --> 00:04:50,230 to fire a function and here I'll go with a simple inline function, a short anonymous function, you 54 00:04:50,230 --> 00:04:52,700 could of course also use a named function instead 55 00:04:52,870 --> 00:04:57,230 but here all I want to do is I want to call keyboard.dismiss. 56 00:04:57,310 --> 00:05:02,680 That's a function this keyboard API which we're importing from React Native gives us and this does just 57 00:05:02,680 --> 00:05:04,220 what the names suggests, 58 00:05:04,360 --> 00:05:06,570 so that now if we tap here, we can type 59 00:05:06,580 --> 00:05:12,610 but if I tap somewhere else, we dismiss the keyboard and that of course happens on both platforms and 60 00:05:12,640 --> 00:05:17,740 I think that's a better user experience because that's what you would expect, that you close the keyboard 61 00:05:18,160 --> 00:05:21,040 if you tap somewhere else on the screen.