Getting ready

To support orientation changes, we are going to use Expo's helper utility called ScreenOrientation.

We will also use the FontAwesome component provided by the Expo package @expo/vector-icons. The Using font icons recipe in Chapter 2, Creating a Simple React Native App, describes how to use this component.

Before we get started, let's create a new app called screen-orientation. We'll also need to make a tweak to the app.json file that Expo creates in the root of the directory. This file has a few basic settings Expo uses when building the app. One of these settings is orientation, which is automatically set to portrait for every new app. This setting determines the orientations the app allows, and can be set to portrait, landscape, or default. If we change this to default, our app will allow both portrait and landscape orientations.

To see these changes take effect, be sure to restart your Expo project.