Learning React Native, 2nd Edition

Chapter 10. Navigation and Structure in Larger Applications

Now that we’ve covered many of the pieces you need to build your own React Native applications, let’s put everything together. Up until now, we’ve mostly dealt with small examples. In this chapter, we’ll look at the structure of a larger application. We’ll cover how to use the <StackNavigation> component from react-navigation to handle transitions between different screens in an application.

The example application from this chapter will also be used in Chapter 11, where we’ll look at how to integrate the state management library Redux into our application.

The Flashcard Application

In this chapter, we’re going to be building a flashcard application that allows users to create decks of cards and then review them. The flashcard application is more complex than the sample applications we’ve been building so far. It’s meant to model what a more fleshed-out application might look like. All the code is available on GitHub. This application is entirely JavaScript-based and cross-platform: it will work on iOS or Android, and is compatible with Expo (meaning you can use the Create React Native App).

As illustrated in Figure 10-1, the Flashcard app has three main views:

• The home page, which lists available decks and allows you to create new decks

• The card creation screen

• The review screen

Figure 10-1. Viewing decks, card ...