1
00:00:02,350 --> 00:00:05,330
Right now our app is always fixed to portrait mode.

2
00:00:05,350 --> 00:00:11,440
If you rotate the device which you can do with your emulator controllers, here on Android with these

3
00:00:11,440 --> 00:00:14,230
two buttons here, you can rotate it,

4
00:00:14,320 --> 00:00:19,960
it's then resized here but you can rotate it and on iOS, on the simulator, you can use the top menu

5
00:00:19,960 --> 00:00:26,080
here to rotate left or right or use the shortcuts you see here which by default should be command

6
00:00:26,080 --> 00:00:30,090
or on Windows and Linux, control and then the left and right arrow key.

7
00:00:30,130 --> 00:00:36,400
So with that, you can also rotate it but what you'll see is that your screen doesn't rotate and that happens

8
00:00:36,400 --> 00:00:44,710
because in expo apps, you can easily lock the device orientation in your app.json file. In this file

9
00:00:44,710 --> 00:00:49,930
you configure your app and we'll come back to this file throughout this course to change different things.

10
00:00:49,930 --> 00:00:55,670
The one thing we're interested in right now is this orientation property you see here, it's set to portrait

11
00:00:55,670 --> 00:00:56,160
here

12
00:00:56,170 --> 00:01:00,160
and that means that this app can only be used in portrait mode.

13
00:01:00,160 --> 00:01:05,110
Now that's a useful feature to have because some apps really need to be locked,

14
00:01:05,140 --> 00:01:11,410
some apps make no sense in landscape mode and you have a lot of apps out there in the wild which actually

15
00:01:11,470 --> 00:01:12,450
are locked.

16
00:01:12,460 --> 00:01:17,110
So if you have an app or you know it only works in portrait mode, you can set this to portrait here

17
00:01:17,200 --> 00:01:18,730
to lock it to that.

18
00:01:18,880 --> 00:01:24,160
You can also set it to landscape to make sure that your app can only be used in landscape mode,

19
00:01:24,160 --> 00:01:30,970
some games need that for example. You can also set this to default and default means that it can be rotated,

20
00:01:31,080 --> 00:01:33,190
that both orientations are supported,

21
00:01:33,220 --> 00:01:35,120
so let's use this now.

22
00:01:35,380 --> 00:01:42,430
If you save that, you'll see that if you now rotate it, it still doesn't change, what you need to do is you

23
00:01:42,430 --> 00:01:48,910
simply need to open the task manager on your emulator or real device and close the app once, also

24
00:01:48,910 --> 00:01:50,520
here on Android.

25
00:01:50,770 --> 00:01:57,160
And with that closed if you restart it here by pressing a and i here in that terminal where npm start

26
00:01:57,160 --> 00:02:03,300
is running, it will restart the app and now you'll be able to rotate this here on iOS and on Android

27
00:02:03,400 --> 00:02:09,740
also but there, you first of all need to pull down from the top here to open this menu here and that enable

28
00:02:09,750 --> 00:02:15,940
rotation by clicking this button. With it enabled, you can also rotate on Android. Now what you'll of course

29
00:02:15,940 --> 00:02:19,610
see is that when you rotate, it might be broken again,

30
00:02:19,660 --> 00:02:29,140
for example here in Android, we can't really reach our start game button and on iOS, it's the same. There

31
00:02:29,200 --> 00:02:35,470
we also have the additional issue that our soft keyboard is overlapping this input if we open it.

32
00:02:35,470 --> 00:02:37,470
That's of course not ideal,

33
00:02:37,480 --> 00:02:39,590
I also can't close it anymore,

34
00:02:39,640 --> 00:02:45,920
so here I'm basically stuck now. I can close it here in the simulator but on a real device, that would

35
00:02:45,920 --> 00:02:46,880
be a problem

36
00:02:46,880 --> 00:02:50,240
and I also can't reach my start game button here.

37
00:02:50,360 --> 00:02:55,040
So that's something you also need to test when building an app and you can either make sure that it always

38
00:02:55,040 --> 00:03:01,670
works by locking the orientation or as we should do it now, by making sure that this also looks good

39
00:03:01,850 --> 00:03:03,840
because right now, it doesn't with these buttons

40
00:03:03,950 --> 00:03:07,640
and most importantly, works on all orientations.

41
00:03:07,640 --> 00:03:09,440
So that's the next thing we'll dive into.