Detecting orientation changes

When building complex interfaces, it's very common to render different UI components, based on the device's orientation. This is especially true when dealing with tablets.

In this recipe, we will render a menu based on screen orientation. In landscape, we will render an expanded menu with icons and texts, and in portrait, we will only render the icons.

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...