1
00:00:02,130 --> 00:00:03,280
Now what about the styling,

2
00:00:03,280 --> 00:00:07,130
what about these buttons? Now for these buttons,

3
00:00:07,130 --> 00:00:10,600
you might notice that you now have a strange behavior

4
00:00:10,610 --> 00:00:18,600
if you wrote it back to portrait mode, also here on Android. On the other hand if we change something and

5
00:00:18,690 --> 00:00:24,000
undo that just so that the app restarts and we start in portrait mode, you'll see it looks good

6
00:00:24,000 --> 00:00:28,240
but now if we go to landscape mode, it looks bad again.

7
00:00:28,260 --> 00:00:36,060
So basically, the width of our buttons gets logged in when the app starts and doesn't adjust when our

8
00:00:36,060 --> 00:00:41,670
screen size changes and of course it changes when we rotate the device because width and height get

9
00:00:41,670 --> 00:00:42,320
swapped,

10
00:00:42,330 --> 00:00:47,280
so we have more width available if we're in landscape mode than we have in portrait mode.

11
00:00:47,280 --> 00:00:53,730
The problem is that currently on the start game screen when we set the width of our buttons which we

12
00:00:53,730 --> 00:00:59,970
do down there, we use dimensions get and this and that's very important to keep in mind, this is only

13
00:00:59,970 --> 00:01:02,970
calculated when your app starts.

14
00:01:02,970 --> 00:01:08,220
So when the app starts for the first time, this has a look at the available width and if it starts in

15
00:01:08,220 --> 00:01:08,910
portrait mode,

16
00:01:08,910 --> 00:01:13,980
that's the portrait mode width, if it starts in landscape mode, it's the landscape mode width and it logs

17
00:01:13,980 --> 00:01:20,390
this in and when you then rotate the device and if you then rotate the device, this doesn't recalculate.

18
00:01:20,550 --> 00:01:25,970
Now of course you would want this to recalculate and there is a simple fix for that.

19
00:01:26,100 --> 00:01:33,530
If you have a width or height, anything you get from dimensions which should respect orientation changes,

20
00:01:33,570 --> 00:01:41,430
so which should recalculate when the orientation changes, then you should not use dimensions width down

21
00:01:41,430 --> 00:01:50,250
there in your stylesheet but instead, you need to manage the width or whatever property it is

22
00:01:50,570 --> 00:01:57,230
that can change dynamically and that should re-render the UI when it changes with state.

23
00:01:57,230 --> 00:02:00,960
So here in the start game string, we already have useState,

24
00:02:01,130 --> 00:02:11,470
we can now also manage our button width here, set button width with useState and initialize this to dimensions

25
00:02:11,500 --> 00:02:18,290
get window width divided by four which is the default

26
00:02:18,300 --> 00:02:21,220
I started with.

27
00:02:21,330 --> 00:02:27,660
Now you can set up a listener here on dimensions, instead of using get by calling add event listener

28
00:02:28,020 --> 00:02:32,640
and listen to the change event which fires whenever the dimensions change which typically is the case

29
00:02:32,640 --> 00:02:35,000
when the user rotates the device.

30
00:02:35,010 --> 00:02:43,950
So here, we can set up a function, update layout for example which is a function in which I call set button

31
00:02:43,950 --> 00:02:50,760
width and set it again to my width here but the dimensions width will be different based on the

32
00:02:50,760 --> 00:02:52,470
width of the screen

33
00:02:52,470 --> 00:02:58,020
when we rotate it and it's this function which I want to call here, so it's update layout which I want to

34
00:02:58,020 --> 00:03:02,430
call here without parentheses here because we just want to point at this function

35
00:03:02,460 --> 00:03:07,530
so that it's called for us when the dimensions change and this will make sure that this re-runs whenever

36
00:03:07,830 --> 00:03:11,160
our dimensions change and therefore this component will re-render.

37
00:03:11,160 --> 00:03:16,100
Now we just have to make sure we use that dynamically recalculated button with state here.

38
00:03:16,230 --> 00:03:20,130
We can do this by using inline styles instead of a stylesheet object.

39
00:03:20,130 --> 00:03:25,770
Now if you had other styles set up for the button which do not depend on the dimensions, then you could

40
00:03:25,770 --> 00:03:28,170
leave them here in the stylesheet of course,

41
00:03:28,170 --> 00:03:32,910
in this case I don't have that though, so I'll just comment this out and you could then merge that with some

42
00:03:32,910 --> 00:03:36,120
inline styles. Here since we have no default other styles,

43
00:03:36,120 --> 00:03:41,550
I'll just replace this stylesheet object we're pointing at with an inline style object where I set

44
00:03:41,550 --> 00:03:47,070
width equal to button width and do the same of course for my second button and with that,

45
00:03:47,130 --> 00:03:51,390
we now have styling that changes whenever we rotate the device.

46
00:03:51,390 --> 00:03:55,550
So if we save this, you'll see this now looks good no matter how we rotate

47
00:03:55,550 --> 00:04:00,350
this, also on Android because this gets re-rendered.

48
00:04:00,570 --> 00:04:07,050
Now one important note here though, right now at the moment I'm setting up a bunch of event listeners

49
00:04:07,050 --> 00:04:07,320
here,

50
00:04:07,350 --> 00:04:11,670
I always add a new event listener whenever this component re-renders and that's not what I

51
00:04:11,670 --> 00:04:12,500
want to do

52
00:04:12,720 --> 00:04:19,320
and we can use use effect which is also built into React and which you should be aware of to have

53
00:04:19,410 --> 00:04:23,540
code that we run whenever our component re-renders.

54
00:04:23,620 --> 00:04:31,020
So now I can use use effect here and the function which I want to run on every re-render is a function which

55
00:04:31,020 --> 00:04:36,210
in the end creates this update layout function here and adds my event listener,

56
00:04:36,270 --> 00:04:41,580
so I'll cut this and add it here in use effect function and if we then return something here in use

57
00:04:41,580 --> 00:04:46,950
effect, that's our clean up function which runs right before use effect runs in and there,

58
00:04:46,950 --> 00:04:54,940
I want to clean up my listener because here I can then call dimensions remove event listener

59
00:04:54,950 --> 00:04:57,900
change for update layout.

60
00:04:57,900 --> 00:05:02,840
So now we clean this up and set up a new one when our component re-renders, clean up the old one, set up

61
00:05:02,840 --> 00:05:06,610
a new one and therefore we always only have one running event listener.

62
00:05:06,770 --> 00:05:13,350
If we do it like this, that's simply cleaner and therefore if we now save this and we go back, we have

63
00:05:13,350 --> 00:05:19,650
the same behavior as before but now in a clean way by utilizing useState and use effect and most importantly,

64
00:05:19,950 --> 00:05:26,370
the event listening capabilities of the dimensions API which allow us to not only set dimensions once

65
00:05:26,610 --> 00:05:29,040
but recalculate them when they change.