Now we started working on the input and it doesn't look too bad but we want to make sure that users
can only enter numbers that are digits only and that we can't enter a dot here or a comma or paste in
some non-numeric content and for that,
we of course need to validate what the user entered here.
Now for validating what the user entered, I want to, as I showed it before already, basically saved the
value
the user entered on every keystroke and feed it back into the input but after every keystroke, I also
want to validate the input to make sure that we're having a valid value there,
so basically a number. For that first of all, we need to manage some state here in the start game screen,
so I'll import use state and then up here at the beginning of this component, I'll set up my use state call,
so register some state and that will be the entered value and even though that will be a number later,
technically it is a string at the beginning because all input is just a string and you manually have
to convert this to a number then
if you want to. I will also add a set entered value function here,
the second element we retrieve from that array use state gives us
and now we can add a constant here which I'll name number input handler or whatever you want to name it.
This will get the input text and that's the function because that's just a function I'm storing in this
constant which I want to connect to my input and there to onChangeText, point at the number input handler
and feed the value back in and that's our entered
value.
Now normally, we would just say set entered value in here and set the input text to be our new entered
value which we feed back into the input
but here, I'l actually first of all validate the input.
So what I'll do here is I'll not set my entered value right to the text here,
instead I'll set it to my input text where I replace and I can call replace because input text will
be a string and that's a normal Javascript method that exists on strings, where I replace some content
based on a regular expression. Now regular expressions can be scary but that's a simple one, we create it
with two forward slashes and in there, I'll add square brackets and basically with this expression say
that I'm replacing anything that's not a number 0 to 9, so not a number, globally in the entire
text so that means it will not just look for the first hit basically but it will search the entire text,
I will replace that
with an empty string, so I'll basically drop any non-number of value. That's what's happening here and that's
what I store in my new state and
with that, we should make sure that the user can't enter anything which is not a number.
So let's check this here on Android,
if I press the comma, you'll see that instantly gets removed and that's exactly what we need here,
we only allow number values.
So that's a little bit of validation we have in place here,
it's not all I want though but we're still not done with the input because on iOS, if we are in that
input mode and we want to close that keyboard, right now that's not really doable.
We can't click outside and close it and it would be nice if we could. Now to make sure that we can and
that we close the keyboard if the user taps somewhere else,
I will actually wrap the entire view here with a special component provided by React Native and that's
the touchable without feedback component,
so a component that allows us to register a touch listener without giving any visual feedback because
that's exactly what we need here.
We can wrap our entire screen with this,
so our entire view can be wrapped with this touchable without feedback listener so that in there or
on there, we can now register or listen to the press event and when a press happens, I want to dismiss
the keyboard and for that, React Native gives us a useful API we can import from React Native and that's
the keyboard API. That's now not a component but that's an API where we can interact with the native
device itself so to say, in this case with the keyboard and here upon a press of this button, I want
to fire a function and here I'll go with a simple inline function, a short anonymous function, you
could of course also use a named function instead
but here all I want to do is I want to call keyboard.dismiss.
That's a function this keyboard API which we're importing from React Native gives us and this does just
what the names suggests,
so that now if we tap here, we can type
but if I tap somewhere else, we dismiss the keyboard and that of course happens on both platforms and
I think that's a better user experience because that's what you would expect, that you close the keyboard
if you tap somewhere else on the screen.