1
00:00:02,220 --> 00:00:08,250
So now with these first basic steps taken, if I now fill in a number here and we continue, this all looks

2
00:00:08,250 --> 00:00:10,330
good to me here,

3
00:00:10,420 --> 00:00:12,980
this all works, if we now start a game,

4
00:00:12,990 --> 00:00:19,560
then I also want to reduce this spacing we have here and I also want to make sure that my box is down

5
00:00:19,560 --> 00:00:20,020
there,

6
00:00:20,040 --> 00:00:23,240
so this log of guesses we have, that this also

7
00:00:23,250 --> 00:00:24,490
looks better.

8
00:00:25,050 --> 00:00:29,820
Now that is something we can do on the game screen of course because that's the screen we're currently

9
00:00:29,820 --> 00:00:31,350
viewing there.

10
00:00:31,410 --> 00:00:37,410
Now for one of course, it's the spacing, this margin top on our bottom container which is this container,

11
00:00:37,590 --> 00:00:43,370
margin top is this distance between the number here and the container and I want to change this. Now

12
00:00:43,510 --> 00:00:44,720
to change this,

13
00:00:44,760 --> 00:00:47,120
we can again use the dimensions API.

14
00:00:47,280 --> 00:00:54,300
So here, I again import dimensions from React Native and now down there, we can calculate this margin

15
00:00:54,510 --> 00:01:03,630
dynamically. What we can do here is we can again get the dimensions of our window and then here,

16
00:01:03,870 --> 00:01:09,630
the width or in this case, probably the height and then divide this by something but this would be

17
00:01:09,630 --> 00:01:17,430
very cumbersome, we could divide this by 20 for example, by 20 and see if that looks good but this

18
00:01:17,430 --> 00:01:21,990
is really a guessing game then, might not be what we really want.

19
00:01:22,230 --> 00:01:28,320
Instead we could check how much height we have available and then use a different spacing based on

20
00:01:28,320 --> 00:01:34,920
that. We could check if our height is let's say greater than 600,

21
00:01:35,310 --> 00:01:41,490
if that's the case, we want have a spacing of 20, otherwise we have one of 10. So we can also use the

22
00:01:41,490 --> 00:01:46,920
dimensions we're calculating in an if condition, in this case in a ternary expression here but you could

23
00:01:46,920 --> 00:01:49,890
use it in a normal if check as well.

24
00:01:49,970 --> 00:01:56,300
So now we can go back here and what we now see is that when we start the game, we don't have that huge

25
00:01:56,300 --> 00:02:01,580
of a gap here on the smaller screen, on the iPhone which is a bigger screen however, we definitely have

26
00:02:01,670 --> 00:02:05,960
a bigger gap and to see that clearer, you can of course play around with that

27
00:02:06,050 --> 00:02:12,690
and for example use 30 for smaller screens and 30 for bigger screens and 5 for smaller screens

28
00:02:12,800 --> 00:02:15,170
and now you should definitely see that.

29
00:02:15,350 --> 00:02:17,680
Here we have a small gap

30
00:02:17,840 --> 00:02:20,450
and here, we have a bigger gap.

31
00:02:20,750 --> 00:02:23,540
So we can also use this in if conditions.

32
00:02:23,540 --> 00:02:29,060
Now with that, I'll set this back to 20 and 5 here but this now hopefully also shows yet another way

33
00:02:29,060 --> 00:02:30,110
of using this.

34
00:02:30,110 --> 00:02:34,700
You can use this in if conditions which of course gives you a lot of flexibility in cases where you

35
00:02:34,700 --> 00:02:40,670
don't want to use the width in a dynamic calculation but you have different hardcoded values which you

36
00:02:40,670 --> 00:02:46,730
want to use based on different breakpoints you want to set, a little bit like you know it from CSS

37
00:02:46,730 --> 00:02:51,080
where you also have media queries and then you can render different things based on different media

38
00:02:51,080 --> 00:02:51,830
queries.

39
00:02:52,070 --> 00:02:57,740
You're also not restricted on using the dimensions API down there in your stylesheet of course, you

40
00:02:57,740 --> 00:03:04,100
can use it anywhere where you can use Javascript, so everywhere in your components basically. You could

41
00:03:04,130 --> 00:03:10,070
also attach totally different styles based on the available width or height. We could also use dimensions

42
00:03:10,100 --> 00:03:18,050
get window here where I assign my style and for example, check my height here, check if it's greater than

43
00:03:18,050 --> 00:03:25,400
600 and if that's the case, use styles button container and otherwise, use styles button container

44
00:03:25,520 --> 00:03:31,520
small if we had this class. I don't have it here, so I'll get rid of that but that's another way of using this,

45
00:03:31,670 --> 00:03:37,280
you can use it anywhere where Javascript runs. You can also of course use it here, you could have an if check

46
00:03:37,280 --> 00:03:45,690
here right before you return your jsx code and check get window height, if that's greater than 600

47
00:03:45,690 --> 00:03:49,830
and if that's the case let's say, you return totally different

48
00:03:49,830 --> 00:03:55,910
jsx code and therefore this code thereafter will never run if you return here and only if you don't

49
00:03:55,910 --> 00:03:57,230
make it into this if check,

50
00:03:57,230 --> 00:04:02,560
so if you have a device that's not as tall as this one, then you make it down there.

51
00:04:02,600 --> 00:04:09,260
So you're really flexible here and use that flexibility to build the layouts you want because that's

52
00:04:09,410 --> 00:04:14,020
what this is all about and what gives you a lot of flexibility for your apps.

53
00:04:14,120 --> 00:04:15,440
So that's the spacing here,

54
00:04:15,440 --> 00:04:19,210
now I also wanted to change my log items down there,

55
00:04:19,340 --> 00:04:21,560
that's also something we can easily do of course.

56
00:04:21,740 --> 00:04:28,400
We have our list items there and on the list items, we set a width of 100% because we set our list

57
00:04:28,400 --> 00:04:32,330
width here with the list container and that's set to 60%.

58
00:04:32,600 --> 00:04:36,750
Now 60% looks pretty good on bigger devices I think

59
00:04:36,910 --> 00:04:40,280
but on smaller devices, we could go bigger than that.

60
00:04:40,280 --> 00:04:48,050
Now we can of course again try to solve this with different rules here where we set a max width and

61
00:04:48,050 --> 00:04:55,370
a min width and maybe also use the dimensions API to calculate this dynamically or we again use an if check.

62
00:04:55,910 --> 00:05:03,500
Here we could again say dimensions get window, get the available width in this case and if that's let's

63
00:05:03,500 --> 00:05:07,340
say greater than 500, then I want to use 60%,

64
00:05:07,340 --> 00:05:15,220
otherwise I want to use 80%. So now we simply render a broader, a wider list container based on

65
00:05:15,220 --> 00:05:18,070
the available width on the device we're running on

66
00:05:18,250 --> 00:05:19,340
and let's actually use

67
00:05:19,420 --> 00:05:24,490
350 here maybe instead of 500 because we're talking about the width, not

68
00:05:24,490 --> 00:05:26,350
about the height.

69
00:05:26,380 --> 00:05:31,630
So now here if we run this on the iPhone, we have to same width as before but on the smaller screen,

70
00:05:32,080 --> 00:05:33,820
we have bigger items.

71
00:05:33,820 --> 00:05:37,650
So that's also something we can do and you can of course play around with the breakpoint

72
00:05:37,690 --> 00:05:39,140
you're effectively setting here.

73
00:05:39,160 --> 00:05:41,290
you can try out different breakpoint sizes here.

74
00:05:41,320 --> 00:05:43,420
Of course you could also have multiple breakpoints,

75
00:05:43,420 --> 00:05:48,940
you can have nested ternary expressions here or before you write too many nested expressions, simply

76
00:05:48,940 --> 00:05:56,500
set up different style objects here which you then load with different if checks you use up there. Just to

77
00:05:56,500 --> 00:06:03,820
give you an example for this, we could have a list container big here and there, we set flex one and we

78
00:06:03,820 --> 00:06:09,320
set our width of let's say 80% because this is the big one

79
00:06:09,450 --> 00:06:13,380
and here we have the normal one with 60%.

80
00:06:13,380 --> 00:06:18,400
Now I have no if condition down there but I have two different style objects

81
00:06:18,400 --> 00:06:22,320
and now we just need to attach different style objects up there,

82
00:06:22,680 --> 00:06:31,780
not here but here of course, on this view. Well, to do this, we can simply set up a list container style variable

83
00:06:31,780 --> 00:06:38,740
here for example and point at styles list container which is our default but then add an if check here

84
00:06:38,830 --> 00:06:46,750
where we check if dimensions get window width and now if the width here is let's say smaller than 350,

85
00:06:46,750 --> 00:06:51,910
so if we have a small device, then we want to have the big list container, so then we

86
00:06:51,910 --> 00:06:53,470
can set list container style,

87
00:06:53,470 --> 00:06:55,960
this variable equal to styles list container

88
00:06:55,960 --> 00:07:01,960
big to point at this style object and now we can use that style object here on the view where we need

89
00:07:01,960 --> 00:07:07,180
the list container style, we use the variable now which holds a different list container style object

90
00:07:07,330 --> 00:07:13,060
based on the width of our device. And if we now save this and we run this again, you see that on the

91
00:07:13,060 --> 00:07:19,270
iPhone with the bigger device where we have more width, we got the smaller container and here on the

92
00:07:19,270 --> 00:07:24,200
Android phone with the smaller device, with less width, we get the bigger container.

93
00:07:24,280 --> 00:07:26,980
So it's the same result as before but a bit more readable

94
00:07:27,070 --> 00:07:32,080
and now we could have multiple such if checks here where we store different styles here in the list

95
00:07:32,080 --> 00:07:34,900
container style which we then use down there,

96
00:07:34,900 --> 00:07:42,070
this can be more readable than having nested ternary expressions down there in your stylesheet object.

97
00:07:42,070 --> 00:07:47,650
So this is how you can play around with that and being aware of that flexibility of the dimensions API

98
00:07:47,770 --> 00:07:48,970
is really crucial here.