Getting ready

We are going to need a new app for this recipe. Let's name it tablet-flexbox.

When we create a new app with Expo, there is an app.json that gets created at the base of the project that provides some basic configuration. In this recipe, we are building an app that we want to be sure looks good on a tablet, particularly in landscape mode. When we open app.json, we should see an orientation property set to 'portrait'. This property determines which orientations should be allowed within our app. The orientation property accepts 'portrait' (lock app to portrait mode), 'landscape' (lock app to landscape mode), and 'default' (allow app to adjust screen orientation based on the device's orientation). For our app, we will set the orientation to 'landscape' so that we can support both landscape and portrait layouts.

We'll also be using some images, which need to be hosted remotely for this recipe to properly simulate loading remote data and displaying images with the Image component. I have uploaded these images to the www.imgur.com image hosting service, and referenced these remote images in the data.json file that the recipe uses for its consumable data. If, for any reason these remote images don't load properly for you, they are also in included in the repository for this recipe under the /assets folder. Feel free to upload them to any server or hosting service, and update the image URLs in data.json accordingly. The repository can be found on GitHub at https://github.com/warlyware/react-native-cookbook/tree/master/chapter-3/tablet-flexbox.