So step-by-step we're making progress,
what we're not able to do is enter a number.
Well I guess technically we can enter a number if we kind of find the input field, here it is but it's
not much fun to search for it, it would be nicer if you could see it, wouldn't it?
So therefore let's style that input field,
that text input field here a little bit and just as before actually, I went to do that in a separate
component.
So in the components folder, I'll add my own input.js file and in there, as always import React from
React and then import text input from React Native
and here I'll actually not need the view because we'll just have the text input here in style and configured
in there and then have the input constant here which is our functional component, which we in the
end also export of course
and one thing we'll need for sure is the stylesheet because that should now be styled here so
that we have one default input look we could reuse in this application if we needed multiple inputs
in different places
and that's really the mindset you have to get into, create reusable components so that you don't have
to copy code around or repeat yourself but that you can easily share your components and easily create
the apps you want from your set of building blocks you create on your own in the end.
So here, my styles object with Stylesheet.create, like that, looks good and now in that component,
I want to return a text input,
so this built-in text input.
Now of course, my idea is that we can style it from in here,
so let's assign a style from in there but just as with the card, it would be nice if we could also set
some styling from outside, like a special width or a special border, anything like that. To enable that,
again I'll pass an object here to style
and for one take all my styles set up in my styles object and there let's say in an input property
which we have yet to add and in addition, also add all styles we are getting from props style so that
we could set styles from outside as well and now down there in stylesheet, we can add the input style
to assign some style to the input. So here, we could give this a height of let's say 30 which should
be a height that looks relatively good and to see something, I also want to add a border at the bottom.
You could also add a border around the entire input with border color and border width and so on
but I like that look where we only have a border below the input but that's of course totally subjective
and something you can set up according to your personal preferences.
A border at the bottom only can be set with border bottom color and there I'll go with grey, another pre-built
color which we can use with that shortcut and give this border bottom also a width here of one, add a margin
vertical of 10 to have some spacing around the input, at least to the top and bottom
and now with that, the base styling for this text
input is done,
now let's use that in the game screen. So in there, I want to import my own input from the components
folder input, like that
and replace this text input here with my own input which in the end wraps this built-in text input of
course.
So use my own input,
get rid of the text input input up there which we don't need anymore
and now if we save this, we see it a little bit but it's very small, you can barely see it here
on iOS and it gets bigger as you type though which is certainly not what we want of course.
We're of course not done,
instead to style the width,
I'll go to the start game screen,
so to the place where we use the input and set up the styling here
because for me it makes sense that we have some general styles which we always want in the input component,
something like the height or the border but some specific styles, like how big should it be, so how broad
should it be,
that's something you want to set up in the place where you actually use it
and therefore here, I'll add this input property in the start game screen stylesheet object and maybe
use a width of 50 pixels here, that should look good and assign that to my custom input here with the
style prop.
So there, we can now point at styles.input and with that, it will be having that width at all times and
if we type there, we don't make that broader anymore,
instead we can then simply scroll automatically in that input.
Now for this specific input, for this specific layout here, it would also be nice if the text would be
centered
I think, for most inputs you want that default behavior of writing from left to right and starting on
the left edge
but here I think some centered text would be nice and therefore in start game screen where I want to
have this centering here, on this input,
we can also add the text align property and set this to center and now this will center this text here
in the middle as we type
and that's really nice for just entering a number then, like this.
Speaking of that, right now we can enter anything in there,
so we certainly need to configure this input and for that if I go to the input component where we use
the text input, there is a lot of stuff we can configure there and actually the best resource is always
of course the official documentation. There in the API docs, if you go there and you search for the
text input, you'll find not only an explanation but you'll also find all the props you can set there
and you can set things like is it multiline or not,
how long may the text be.
You can also set a placeholder text,
you can set autocorrection and all that fun stuff,
so definitely check these docs to find the specific property you might need for your use case.
I want to be able to set these props but I want to be able to set them from the place where I use
my custom input. So not from in here because that would make sure that we use the same configuration for
all inputs we might have in our app,
I want to have more flexibility and just set up some base styling in here and configure the input in
the place where we then use it instead of in the core wrapper component.
The cool thing is React and that's not React Native, that's just React in normal Javascript has a syntax
for that.
You can take your props you're getting and spread them on your component like this.
The syntax might look a bit strange but what it in the end does is it takes all the props you have,
all the props you set here and basically adds them to your component as props.
Now if you thereafter define other props like style and you already got a style here,
this style will override the style you've got here and
that's actually what I want because if I set a style prop on my own input from outside, I definitely
want to override this with this style prop and add this styling which is set up down there to this text
input
but if you set other props outside of this component, so on my custom component, then they will be added
to the text input and that allows us to add all the props we can add on the text input
also on our input, so on our own component.
So here where we use input, we can now not only add the style but we can also add blurOnSubmit for
example to make sure that when we press the submit button there, we lose focus and we close the soft
keyboard. We can set autocapitalize to none which is one of the allowed values there
if you check the docs. You can set it to none, sentences, words and so on,
so I don't want to have capitalization turned on here because we'll just enter number but also because
I want to show you different configurations you can set. I'll set autocorrect here to false so that
we're not auto correcting the user input and very important here,
I'll set the keyboard type to numeric, so that the user has to enter a number here.
I'll set the max length here to 2 so that you may only enter two digits and not a very long number because
this game here and it's just one of the restrictions I have here, is that this game only works with a two-digit
number. With all of that set up,
now if we go back and I toggle my soft keyboard, you see you get that number keyboard here and you
can only enter two digits there and not more than that, which is of course exactly what I want.
In addition, here on Android we see this, if you click the confirm button, this will close it,
that's thanks to that blurOnSubmit thing. On iOS, such a button doesn't exist here so there, we'll actually
have to find a different solution for closing this if you tap somewhere else for example because right
now, that's not happening.
But the good thing is we now have a keyboard we can see and a keyboard where we can enter numbers.
One thing I want to change though is that right now, I can also enter a decimal separator here.
Now to get rid of that, you can change the keyboard type to number pad and to see all available
keyboard types, as always the official docs are the place to go, there for the text input, you can dive into
a keyboard type and find out what you can set, what works on all platforms and what you could set if
you would have a check that checks on which platform you are running the code which we haven't learned about
yet.
Number pad is supported on both platforms though
and if you set this, you now have an input where you can't enter a decimal place here,
if you type in here and you can't do it on iOS. On Android, you unfortunately can though,
so there we'll also have to find a different fix.