1
00:00:02,040 --> 00:00:06,860
Let's start by making this usable again because that's the most important thing.

2
00:00:06,900 --> 00:00:12,780
The fix here of course is to make this scrollable because if we can scroll this view, then we can reach

3
00:00:12,780 --> 00:00:14,610
this button down there again.

4
00:00:14,610 --> 00:00:20,580
So back on the start game screen, we need the good old scroll view again which we import from React Native

5
00:00:22,970 --> 00:00:28,460
and now we can use that to wrap our view which surrounds our screen, this touchable without feedback

6
00:00:29,070 --> 00:00:33,390
button in this case, with the scroll view.

7
00:00:33,510 --> 00:00:39,330
So let's use scroll view to surround our entire screen here,

8
00:00:39,340 --> 00:00:45,600
our entire component in the end and with this, this is now scrollable. The advantage is that we're now

9
00:00:45,610 --> 00:00:47,370
the keyboard is open on iOS,

10
00:00:47,560 --> 00:00:52,510
We can scroll a little bit but we still have the problem that it bounces back,

11
00:00:52,510 --> 00:00:56,740
so that's not perfect but at least we can reach this button and we'll take care about the keyboard in

12
00:00:56,740 --> 00:01:04,590
a second and we can now use the app again because now we can start the game again. Now on the game screen,

13
00:01:04,590 --> 00:01:04,940
by the way

14
00:01:04,950 --> 00:01:09,420
we have a similar problem on the small Android device,

15
00:01:09,510 --> 00:01:13,380
we have such little height available that we can't even see our log,

16
00:01:13,440 --> 00:01:16,890
we can scroll it but yes that's not too convenient

17
00:01:16,950 --> 00:01:21,960
and here on iOS, we also don't we have a big log. So there, we might want to use a totally different

18
00:01:21,960 --> 00:01:24,060
layout for example or

19
00:01:24,080 --> 00:01:26,160
whatever, we'll have to see

20
00:01:26,160 --> 00:01:31,020
but before I focus on this screen, there also is one other thing. We've fixed the scrolling,

21
00:01:31,020 --> 00:01:32,160
that's good

22
00:01:32,160 --> 00:01:35,170
but we still have two other problems on the start game screen and

23
00:01:35,220 --> 00:01:42,250
if I change something, change it back just so that this restarts, we have the layout

24
00:01:42,260 --> 00:01:47,120
I'm not happy with with the buttons, though it now looks different than before and we'll come back to

25
00:01:47,120 --> 00:01:48,110
why in a second

26
00:01:48,170 --> 00:01:49,210
and the keyboard,

27
00:01:49,220 --> 00:01:55,640
that's the real issue here. So what can we do about this? To fix that keyboard issue,

28
00:01:55,640 --> 00:02:01,490
there's another component you can import from React Native and that's the keyboard avoiding view.

29
00:02:01,670 --> 00:02:08,750
That's a view, a component you can use to wrap your component with, in this case inside of that scroll

30
00:02:08,750 --> 00:02:13,760
view and that's important, use it inside of the scroll view and then wrap your entire touchable without

31
00:02:13,760 --> 00:02:22,470
feedback component with it to make sure that your keyboard, your soft keyboard when it opens up never

32
00:02:22,530 --> 00:02:24,720
overlays the input you're typing in

33
00:02:24,770 --> 00:02:27,660
and for that you can also configure the keyboard avoiding view,

34
00:02:27,750 --> 00:02:34,750
you can set a behavior there and that accepts different values and set this to position here

35
00:02:34,760 --> 00:02:38,880
and I'll come back to different behaviors you can set up and how they differ in a second.

36
00:02:39,260 --> 00:02:47,180
With that added here on iOS, you'll now see that this slides a little bit when we open the soft keyboard,

37
00:02:47,210 --> 00:02:50,050
when we start typing. Doesn't slide enough

38
00:02:50,060 --> 00:02:56,210
but for that we can also go back here and set the keyboard vertical offset to a number, for example to

39
00:02:56,210 --> 00:02:57,450
30,

40
00:02:57,530 --> 00:02:59,860
this is the amount of pixels it slides it up

41
00:02:59,870 --> 00:03:04,660
and this should be the height of your input typically or around the height of your input.

42
00:03:04,700 --> 00:03:07,610
And now this slides it up so that we can always see this which is great,

43
00:03:07,610 --> 00:03:10,320
it now never overlays our input here.

44
00:03:10,370 --> 00:03:17,140
Now setting this to behavior position simply means that it repositions the entire screen by 30 pixels

45
00:03:17,140 --> 00:03:17,770
basically,

46
00:03:18,090 --> 00:03:24,740
we could also set this to padding so that a padding gets added at the bottom to slide everything up

47
00:03:24,740 --> 00:03:30,170
and last but not least, you can also change the overall height of the screen a little bit.

48
00:03:30,170 --> 00:03:37,070
Now typically on iOS, it works best if you use position and on Android it works best if you get use

49
00:03:37,070 --> 00:03:37,870
padding

50
00:03:37,880 --> 00:03:42,100
and later in this module, you learned how to find out on which platform you're running on,

51
00:03:42,140 --> 00:03:47,740
for now I'll use position here. With that, we fixed the keyboard issue.