1
00:00:02,830 --> 00:00:08,740
Now we had another issue in this app here because once this is all solved here, if we quickly go

2
00:00:08,740 --> 00:00:12,200
there, make sure that we solve this,

3
00:00:12,220 --> 00:00:16,120
then we have this screen and this screen also is broken.

4
00:00:16,120 --> 00:00:17,670
We got two issues here actually,

5
00:00:17,680 --> 00:00:22,810
one is that the screen isn't scrollable which wasn't a problem on bigger devices where we have more

6
00:00:22,810 --> 00:00:23,190
height

7
00:00:23,200 --> 00:00:29,050
but here, we can't squeeze all the content on the screen, so we might want to make it scrollable just to be

8
00:00:29,050 --> 00:00:36,640
safe and/or alternatively, we make sure that we're guaranteed to fit everything onto the screen and to

9
00:00:36,640 --> 00:00:43,270
be guaranteed that this is the case, we need to go to the game over screen and calculate our heights

10
00:00:43,270 --> 00:00:50,230
here dynamically, especially the image height here which we're right now hardcoding to 300 pixels which

11
00:00:50,230 --> 00:00:52,810
is way too big on the small device.

12
00:00:52,810 --> 00:00:55,950
Now you already learned about the solution for that,

13
00:00:56,050 --> 00:01:02,880
we can again use the dimensions API by importing it from React Native and with dimensions imported,

14
00:01:02,890 --> 00:01:11,430
we can go down to our stylesheet and on the image container, we can now say dimensions get window width

15
00:01:12,150 --> 00:01:21,590
and now let's say for the image container, for the image here, we want to have a width of maybe 70%

16
00:01:21,590 --> 00:01:24,860
of the available width and we want to have the same value as a height,

17
00:01:24,860 --> 00:01:25,920
so I'll just copy that there.

18
00:01:25,920 --> 00:01:32,180
Important here, we don't use height because the image shouldn't be 70% of our available height

19
00:01:32,480 --> 00:01:32,960
high,

20
00:01:33,200 --> 00:01:38,390
instead it should just have the same height as it has width and that's calculated on the device width,

21
00:01:38,420 --> 00:01:45,260
so we use width down there as well. Now here border radius should be half of that, so we can use that here

22
00:01:45,380 --> 00:01:50,840
too and then divide it by two and we'll have the perfect border radius for that dynamically calculated

23
00:01:50,900 --> 00:01:54,170
width. So that's one important thing.

24
00:01:54,200 --> 00:01:59,030
Now we also got a couple of other sizes we're setting up, like the margin vertical here which we hardcode

25
00:01:59,030 --> 00:02:07,600
to 30, the same for the result container and we might want to change this as well. So here we can

26
00:02:07,600 --> 00:02:11,380
also say dimensions get window,

27
00:02:11,380 --> 00:02:21,010
in this case height and maybe divide this by let's say 20 and see if that looks good and also down there

28
00:02:21,040 --> 00:02:26,720
margin vertical, maybe divide this by 40 because it was 15, this was 30,

29
00:02:26,740 --> 00:02:31,960
so let's divide this by 40, if we divided this by 20 to have the same relation

30
00:02:31,960 --> 00:02:34,370
between these two margin verticals again.

31
00:02:34,510 --> 00:02:35,980
So let's solve this again and

32
00:02:36,010 --> 00:02:41,150
let's see what the result is, better,

33
00:02:41,180 --> 00:02:44,100
now at least we can see the button but still not perfect.

34
00:02:44,240 --> 00:02:50,150
This margin here is certainly still too big and also the font size, we could shrink this as well.

35
00:02:50,330 --> 00:02:56,570
So rounder image, we can certainly divide the height by 30 here for this margin we're setting up and then

36
00:02:56,570 --> 00:03:03,970
go to 60 for this result container vertical margin and for the font size here,

37
00:03:04,130 --> 00:03:13,860
here we can use an if check if we want to and for example check our available height here and if that is

38
00:03:13,860 --> 00:03:25,210
let's say smaller than 400, then we use 16 here and otherwise, we use 20. Now last but not least to also

39
00:03:25,210 --> 00:03:31,310
make sure that we can scroll because sometimes with all the tweaking, we'll still not be able to fit

40
00:03:31,310 --> 00:03:35,400
it onto the screen, at least not without making everything super small,

41
00:03:35,510 --> 00:03:42,990
we might want to import that scroll view here and wrap our view with that,

42
00:03:42,990 --> 00:03:50,730
so add scroll view here around our view to make that scrollable and

43
00:03:50,850 --> 00:03:52,860
now let's have a look at this again,

44
00:03:52,880 --> 00:03:53,860
let's solve this,

45
00:04:03,670 --> 00:04:10,700
now this looks better. It fits onto the screen and if we needed to, we would also be able to scroll it, we can

46
00:04:10,700 --> 00:04:14,090
see that on the iPhone by the way, there if we solve this,

47
00:04:19,360 --> 00:04:22,390
on the iPhone we can always scroll a little bit and it bounces back,

48
00:04:22,390 --> 00:04:27,010
we have scrolling enabled and therefore now this looks good on the iPhone but also on this device

49
00:04:27,040 --> 00:04:32,920
where we reduce the font size a little bit, worked on the spacing here a little bit and if it would

50
00:04:33,070 --> 00:04:36,420
go beyond our boundaries, then we could scroll it,

51
00:04:36,520 --> 00:04:45,760
so we will always be able to interact with our game. So that's the dimensions API here and the dimensions API

52
00:04:45,760 --> 00:04:52,250
really helps us build user interfaces that look good on different device sizes and as you learned, there

53
00:04:52,250 --> 00:04:59,230
are different ways of using it - to dynamically calculate sizes, be that for width or height or margins

54
00:04:59,440 --> 00:05:05,710
and also of course in if statements to simply render different content, attach different styles or different

55
00:05:05,710 --> 00:05:10,750
style objects based on the width or height conditions you're setting up here

56
00:05:10,750 --> 00:05:16,180
but that's not all because users might also change the device orientation while the app runs

57
00:05:16,180 --> 00:05:20,440
and that also sometimes means that we need to change the styling and/or layout.