We have several components at our disposal, but containers and text are the most common and useful components to create layouts or other components. In this recipe, we'll see how to use containers and text, but most importantly we'll see how styles work in React Native.

Follow the instructions in the previous chapter in order to create a new application. We'll name this application fake-music-player.

When creating a new application with Expo, a small amount of boilerplate code will be added to the App.js file in the root folder. This will be the starting point of any React Native application you build. Feel free to remove all boilerplate at the beginning of each recipe...

Images are an important part of any UI, whether we use them to display icons, avatars, or pictures. In this recipe, we'll use images to create a mock video player. We'll also display the icons from the local device and a large image from a remote server (hosted by Flickr).

In order to follow the steps in this recipe, let's create a new application. We're going to name it fake-video-player.

We're going to display a few images in our application to mimic a video player, so you'll need corresponding images for your application. I recommend using the icons I used by downloading them from the repository for this recipe on GitHub at https://github.com...

Buttons are an essential UI component in every application. In this recipe, we'll create a toggle button, which will be unselected by default. When the user taps on it, we'll change the styles applied to the button to make it appear selected.

We'll learn how to detect the tap event, use an image as the UI, keep the state of the button, and add styles based on the component state.

Let's create a new app. We're going to name it toggle-button. We're going to use one image in this recipe. You can download the assets for this recipe from the corresponding repository hosted on GitHub at https://github.com/warlyware/react-native-cookbook/tree/master/chapter-2/toggle...

Lists are everywhere: a list of orders in the user's history, a list of available items in a store, a list of songs to play. Nearly any application will need to display some kind of information in a list.

For this recipe, we're going to display several items in a list component. We're going to define a JSON file with some data, then we're going to load this file using a simple require to finally render each item with a nice but simple layout.

Let's start by creating an empty app. We'll name this application list-items. We're going to need an icon to display on each item. The easiest way to get images is to download them from this recipe's repository...

In this recipe, we'll learn about flexbox. In the previous recipes in this chapter, we've been using flexbox to create layouts, but in this recipe, we'll focus on the properties we have at our disposal by recreating the layout from a random name generator application on the App Store called Nominazer (https://itunes.apple.com/us/app/nominazer/id765422087?mt=8).

Working in flexbox in React Native is essentially the same as working with flexbox in CSS. This means if you're comfortable developing websites with a flexbox layout, then you already know how to create layouts in React Native! This exercise will cover the basics of working with flexbox in React Native, but for a list of all of the layout props you can use, refer to the documentation on Layout Props (https://facebook.github.io/react-native/docs/layout-props.html).

For any application that has more than one view, a navigation system is of paramount importance. The need for navigation is so pervasive in application development that Expo provides two templates when you create a new application: Blank or Tab Navigation. This recipe is based on a very pared down version of the Tab Navigation app template provided by Expo. We'll still begin the recipe with a Blank app and build our basic Tab Navigation app from scratch to better understand all of the requisite parts. After completing this recipe, I encourage you to start a new app with the Tab Navigation template to see some of the more advanced features we'll be covering in later chapters, including push notifications and stack navigation.