Let's start by making this usable again because that's the most important thing.
The fix here of course is to make this scrollable because if we can scroll this view, then we can reach
this button down there again.
So back on the start game screen, we need the good old scroll view again which we import from React Native
and now we can use that to wrap our view which surrounds our screen, this touchable without feedback
button in this case, with the scroll view.
So let's use scroll view to surround our entire screen here,
our entire component in the end and with this, this is now scrollable. The advantage is that we're now
the keyboard is open on iOS,
We can scroll a little bit but we still have the problem that it bounces back,
so that's not perfect but at least we can reach this button and we'll take care about the keyboard in
a second and we can now use the app again because now we can start the game again. Now on the game screen,
by the way
we have a similar problem on the small Android device,
we have such little height available that we can't even see our log,
we can scroll it but yes that's not too convenient
and here on iOS, we also don't we have a big log. So there, we might want to use a totally different
layout for example or
whatever, we'll have to see
but before I focus on this screen, there also is one other thing. We've fixed the scrolling,
that's good
but we still have two other problems on the start game screen and
if I change something, change it back just so that this restarts, we have the layout
I'm not happy with with the buttons, though it now looks different than before and we'll come back to
why in a second
and the keyboard,
that's the real issue here. So what can we do about this? To fix that keyboard issue,
there's another component you can import from React Native and that's the keyboard avoiding view.
That's a view, a component you can use to wrap your component with, in this case inside of that scroll
view and that's important, use it inside of the scroll view and then wrap your entire touchable without
feedback component with it to make sure that your keyboard, your soft keyboard when it opens up never
overlays the input you're typing in
and for that you can also configure the keyboard avoiding view,
you can set a behavior there and that accepts different values and set this to position here
and I'll come back to different behaviors you can set up and how they differ in a second.
With that added here on iOS, you'll now see that this slides a little bit when we open the soft keyboard,
when we start typing. Doesn't slide enough
but for that we can also go back here and set the keyboard vertical offset to a number, for example to
30,
this is the amount of pixels it slides it up
and this should be the height of your input typically or around the height of your input.
And now this slides it up so that we can always see this which is great,
it now never overlays our input here.
Now setting this to behavior position simply means that it repositions the entire screen by 30 pixels
basically,
we could also set this to padding so that a padding gets added at the bottom to slide everything up
and last but not least, you can also change the overall height of the screen a little bit.
Now typically on iOS, it works best if you use position and on Android it works best if you get use
padding
and later in this module, you learned how to find out on which platform you're running on,
for now I'll use position here. With that, we fixed the keyboard issue.