Before we dive into the code, we have to think about our intended navigation structure for our app. By doing so, we can spot issues early and correct them without having to refactor our code. It also helps communicate how the app should be built within a multi-person development team.

The concept of sketching out the navigational structure of your app is often referred to as “navigation hierarchy”. In its simplest form, you can draw the structure as a simple graph. Every node represents a screen, and the edges define how the user can navigate from screen to screen.

On the right, you can see an example of such a graph. This is an overview of the Codecademy Go app. If you haven’t used this before, feel free to try it out. Let’s quickly walk over the basic structure.

• Login - When users download the app, they need to authenticate in order to use the app. This part is technically more than one screen, like login and register. For simplicity, we only added the login screen here.
• Feed - This is a screen where users can go back to courses they started but never finished. It also includes the latest articles when they are published.
• Catalog - After users complete a course, they can browse the catalog to find more. They can find all of the existing courses here.
• Search - If a user heard about an interesting course or article, they should be able to find it by searching for it. This screen is a list of all available content on Codecademy.
• Profile - This part allows the user to see an overview of their achievements and streaks. It also includes a settings page where they can manage their profile.

In the next exercises, we will recreate parts of this structure using react-navigation.