Right now our app is always fixed to portrait mode.
If you rotate the device which you can do with your emulator controllers, here on Android with these
two buttons here, you can rotate it,
it's then resized here but you can rotate it and on iOS, on the simulator, you can use the top menu
here to rotate left or right or use the shortcuts you see here which by default should be command
or on Windows and Linux, control and then the left and right arrow key.
So with that, you can also rotate it but what you'll see is that your screen doesn't rotate and that happens
because in expo apps, you can easily lock the device orientation in your app.json file. In this file
you configure your app and we'll come back to this file throughout this course to change different things.
The one thing we're interested in right now is this orientation property you see here, it's set to portrait
here
and that means that this app can only be used in portrait mode.
Now that's a useful feature to have because some apps really need to be locked,
some apps make no sense in landscape mode and you have a lot of apps out there in the wild which actually
are locked.
So if you have an app or you know it only works in portrait mode, you can set this to portrait here
to lock it to that.
You can also set it to landscape to make sure that your app can only be used in landscape mode,
some games need that for example. You can also set this to default and default means that it can be rotated,
that both orientations are supported,
so let's use this now.
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
simply need to open the task manager on your emulator or real device and close the app once, also
here on Android.
And with that closed if you restart it here by pressing a and i here in that terminal where npm start
is running, it will restart the app and now you'll be able to rotate this here on iOS and on Android
also but there, you first of all need to pull down from the top here to open this menu here and that enable
rotation by clicking this button. With it enabled, you can also rotate on Android. Now what you'll of course
see is that when you rotate, it might be broken again,
for example here in Android, we can't really reach our start game button and on iOS, it's the same. There
we also have the additional issue that our soft keyboard is overlapping this input if we open it.
That's of course not ideal,
I also can't close it anymore,
so here I'm basically stuck now. I can close it here in the simulator but on a real device, that would
be a problem
and I also can't reach my start game button here.
So that's something you also need to test when building an app and you can either make sure that it always
works by locking the orientation or as we should do it now, by making sure that this also looks good
because right now, it doesn't with these buttons
and most importantly, works on all orientations.
So that's the next thing we'll dive into.