1
00:00:02,130 --> 00:00:08,820
One important note, the Dimensions API is by far the most important API you have in React Native when

2
00:00:08,820 --> 00:00:12,100
it comes to dynamically working with available width and height.

3
00:00:12,360 --> 00:00:16,200
It's part of REAC native and does not depend on exposure or anything like that.

4
00:00:16,740 --> 00:00:19,800
EXPL, however, also gives you an API you can use.

5
00:00:20,370 --> 00:00:27,630
You can import something from XPO in this therefore only works and XPO app, of course, and that's

6
00:00:27,630 --> 00:00:29,760
the screen orientation object.

7
00:00:30,240 --> 00:00:36,240
This is an object which helps you detect screen orientation changes and also lock the screen orientation

8
00:00:36,240 --> 00:00:37,430
when your app is running.

9
00:00:37,830 --> 00:00:43,800
So even if you initially set No Lockyear in your app Jason file, you can still add one after you started

10
00:00:43,800 --> 00:00:45,840
your app with the help of that API.

11
00:00:46,740 --> 00:00:52,860
The screen orientation API has a couple of functionalities and I want to quickly walk you through them.

12
00:00:52,860 --> 00:00:55,560
You can, of course, play around with them to learn more about them.

13
00:00:56,460 --> 00:00:59,340
For example, you have to lock async method.

14
00:01:01,320 --> 00:01:07,320
This locks the orientation in the end and you set the lock by not by now, using screen orientation

15
00:01:07,320 --> 00:01:14,580
dot and then you set this to orientation lock and then, for example, to portrayed or put it down.

16
00:01:15,180 --> 00:01:18,240
So a lot of configuration possibilities you have here.

17
00:01:18,750 --> 00:01:20,740
And now I'm calling this in the game screen.

18
00:01:20,850 --> 00:01:25,620
This means that I can freely rotate this as long as I'm configuring the game.

19
00:01:26,660 --> 00:01:32,210
But as soon as the game starts, you'll see that the orientation doesn't change anymore, so that can

20
00:01:32,210 --> 00:01:36,230
be useful if you need to lock this down when your app reaches a certain point.

21
00:01:36,950 --> 00:01:44,390
In addition to that, screen orientation, API here also gives you a function to get your current orientation.

22
00:01:44,390 --> 00:01:47,210
And async simply means that this gives you a promise.

23
00:01:47,210 --> 00:01:48,740
It doesn't immediately do that.

24
00:01:49,010 --> 00:01:51,950
It gives you a promise where you eventually get a result.

25
00:01:51,950 --> 00:01:56,090
But the result will be there very quick, just not in the next code line immediately.

26
00:01:58,010 --> 00:02:03,530
And you can also set up an orientation change listener, for example, and disorientation change listener

27
00:02:03,530 --> 00:02:04,880
will do what it sounds like.

28
00:02:05,030 --> 00:02:07,880
It fires a function whenever the orientation changes.

29
00:02:08,390 --> 00:02:13,210
That can be useful if you have different layouts that only depend on the question whether you're in

30
00:02:13,220 --> 00:02:18,440
portrait or landscape mode and not so much on the dimensions, because, of course, it's important

31
00:02:18,440 --> 00:02:23,360
to keep in mind that with the code we wrote here with you is a fact where we listen to changes in the

32
00:02:23,360 --> 00:02:24,020
dimensions.

33
00:02:24,440 --> 00:02:28,370
We technically don't just react to orientation changes, though.

34
00:02:28,370 --> 00:02:31,400
That's typically is what changes the available width and height.

35
00:02:31,460 --> 00:02:33,620
There isn't really anything else that could change it.

36
00:02:34,100 --> 00:02:40,130
But you're not strictly only checking for whatever orientation changed and you can't directly check

37
00:02:40,370 --> 00:02:43,700
for the orientation changed and is now a portrait.

38
00:02:43,790 --> 00:02:49,370
Instead, you could listen for a change and then in the function you fire checked the new available

39
00:02:49,370 --> 00:02:54,590
width and kind of find out, OK, this is a lot of with we're probably in landscape now.

40
00:02:55,160 --> 00:03:00,620
That is something you can guess, but you don't know because you're checking for the width and the height,

41
00:03:00,710 --> 00:03:02,300
not for the orientation.

42
00:03:03,380 --> 00:03:07,790
Now, typically, it's the width and height that matters to you, though you might not be interested,

43
00:03:07,790 --> 00:03:12,470
whether you're in landscape mode and have a lot of width or whatever, the app is running on an iPad

44
00:03:12,470 --> 00:03:14,390
and therefore has more width than on a phone.

45
00:03:14,600 --> 00:03:18,050
You just might be interested in the question, how much with do I have?

46
00:03:18,050 --> 00:03:22,700
And then render your layout based on that, no matter if that's the case because you're in the landscape

47
00:03:22,700 --> 00:03:24,790
phone or a portrait mode iPad.

48
00:03:25,340 --> 00:03:28,490
So therefore the Dimensions API is the important API.

49
00:03:28,730 --> 00:03:35,120
But I didn't want to hide the screen orientation API exposes from you, especially because it can also

50
00:03:35,120 --> 00:03:40,250
be used for locking and unlocking, of course, the orientation at runtime, which can be useful at

51
00:03:40,250 --> 00:03:40,700
times.