Learn about information hierarchy and how to implement it with native navigators

Navigation

Creating easy-to-use apps is hard but important. When you create a complicated app, users might get frustrated and stop using your app. There are a few techniques to keep your app easy to use, like using existing navigational patterns. By reusing these navigational patterns, users may navigate from screen to screen without having to learn how your app works.

In this lesson, we will cover:
- Fundamentals of navigation
- Three common navigation patterns: stack, tab, and drawer
- Implementing basic patterns with `react-navigation`
- Implementing a more complex structure with nested navigation
- Implementing a basic authentication flow


Introduction

Let's take a look at some commonly used mobile navigation patterns. By reusing these patterns, users don't have to re-learn how to navigate your app. Instead, they can apply some of the patterns they already know. Doing so will help your users start using your app the second they install it.

On the right side, you can see these patterns as a GIF to get an understanding of the pattern.

- **Tab Navigation** - This pattern uses a tab bar to allow users to switch between screens. Usually, these screens contain different functionality, like a home screen and a profile screen. There are more variants of the tab navigator, like [Google's Material Design (top) Tabs](https://material.io/components/tabs). The tabs usually contain the primary functionality of an app, like a feed and profile screen.

- **Stack Navigation** - The second example is a stacked pattern. Instead of using a menu or tab bar, the user has to go from screen to screen to navigate through all screens. When a user navigates from one screen to another, the screen is pushed on a stack. The order of the stack doesn't matter; every transition is another screen in the stack. However when going back a page, the last screen is removed from the stack and the previous screen is displayed. These stacks usually contain screens that are functional-related to each other, like a list of tasks and a task detail screen.

- **Drawer Navigation** - Instead of using a tab bar, it uses a pane that can be opened by either swiping or opening a menu button. In this pane, there is a menu where the users can switch between screens. Like the tab bar pattern, these screens often contain the primary functionality of your app.

Navigation Patterns

There are multiple variants of tab navigation on both Android and iOS. Apple recommends using a [bottom tab bar in their Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/). In Google's Material Design, they mention a similar [bottom tab bar](https://material.io/components/bottom-navigation). They also outline how you could implement a top tab bar. Although the bottom and top bar look identical, they work slightly differently. For example, the "active tab" indicator and transition between the tabs are different. All of these variants are available in [`react-navigation`](https://reactnavigation.org/docs/tab-based-navigation) as different navigators.

We want to implement tabs that contain different primary functionality of our app. Because these screens are functionally unrelated, we need to implement the bottom tab variant. To give you a small reminder, these are the four tabs in the Codecademy Go app.

- **Feed** - This is the primary tab users would see when they open the app. It includes a feed with the current course and some articles.
- **Catalog** - In this tab, users can browse and start new courses.
- **Search** - This tab is similar to catalog but allows users to search for content instead of just browsing.
- **Profile** - This is the tab where users can see their account and progress so far.

Tab Navigation

In plain React, there is no concept of rendering different pages. It only renders the default _entrypoint_, which is just a single React component. This also applies to Expo and React Native. Everything in your app has to be handled within that single component. Managing transitions between multiple screens can be a complex task. Luckily, [`react-navigation`](https://reactnavigation.org/) can do most of the heavy lifting for us. We can implement the common mobile navigation patterns and connect the screens together. 

One of the core principles of [`react-navigation`](https://reactnavigation.org/) is the _navigator_. It's the fundamental structure that holds multiple screens of your app. The navigator determines what screen should render and how transitions between multiple screens are animated. All of the screens are identified and referred to by a unique name.

[`react-navigation`](https://reactnavigation.org/) ships with a couple of different navigators, each following one of the navigational patterns you saw earlier: 

- [Tab Navigator](https://reactnavigation.org/docs/tab-based-navigation) - Renders a tab menu where users can switch between multiple screens. These screens are only rendered when navigated to.
- [Stack Navigator](https://reactnavigation.org/docs/stack-navigator) - Renders a header with the screen title and optional back buttons when users navigate other screens.
- [Drawer Navigator](https://reactnavigation.org/docs/drawer-based-navigation) - Renders a sidebar list menu where users can switch between multiple screens. Users can open the menu by swiping from the side of the screen.



React Navigation

When creating your app's navigational structure, you often need to use a combination of multiple different navigators. For example, a bottom tab might need more screens to help users perform actions. These screens could be anything, like a dedicated "create" screen.

To help you structure more complex use cases, you can combine multiple navigators. Instead of rendering a screen, you can also render a navigator _as a screen_. Nesting navigators sounds simple, but you have to be careful when doing so. When rendering a stack navigator inside another stack navigator, you might get two headers on top. To fix that, you can customize or turn off the header in one stack navigator.

In our example of the Codecademy Go app, we want to add a stack navigator to the profile tab. Here, we show an overview screen and a settings screen. The settings screen shouldn't be a tab on its own. By adding this stack navigator, we group the profile functionality under a single tab. It also adds a nice screen animation when users go to the settings screen and keeps the profile tab marked as active.

![Nested navigator with Overview and Settings nested under Profile](https://static-assets.codecademy.com/Courses/Learn-React-Native/4-navigation/nested-navigator-v04.png)


Nested Navigation

Awesome! We’ve covered the basics of navigation with Expo and React Native, including:

- Most common mobile navigation patterns; stack, drawer, and tab navigation
- Drawn a navigation hierarchy based on Codecademy Go
- Set up the basic components for `react-navigation`
- Implementing common navigation patterns
- Connecting navigation to custom events
- Combining different navigators for more complex structures
- Implementing a basic authentication flow

Review

With the tab or drawer navigator, you get a customizable menu that users can use to navigate between screens. The stack navigator only adds a menu with the screen title and a back button once you navigate within the stack. To navigate to different screens within the stack, we have to implement our code to move users from one screen to another.

Luckily, [`react-navigation` allows us to interact with the navigators programmatically](https://reactnavigation.org/docs/navigating). With this API, we can move users to different screens when we need to. This can be a simple button press or after a successful login.

Every screen receives a `navigation` property. This property is an object with a lot of useful methods, like `.navigate('ScreenName')` or `.goBack()`.

```js
// Using properties, only available in screen components
const FeedScreen = (props) => {
  const nav = props.navigation;

  return (
    <Button
      title="Go to home"
      onPress={() => nav.navigate('Home')}
    />
  );
};
```

You can also access this navigation object using the `useNavigation` hook. We are going to use the [`useNavigation`](https://reactnavigation.org/docs/use-navigation) hook in our exercises.

```js
// Using the hook, available in all components
const HomeButton = () => {
  const nav = useNavigation();

  return (
    <Button
      title="Go to home"
      onPress={() => nav.navigate('Home')}
    />
  );
};
```

Programmatic Navigation

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](https://news.codecademy.com/codecademy-go-faq/) 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`](https://reactnavigation.org/).

The navigational hierarchy of the Codecademy Go app.

Navigation in practice

We almost created the same structure as Codecademy Go. Our nested tab and stack navigators can handle most of the app already. But, before users can access the app, they need to authenticate first. Without an account, we can't keep track of the user's progress.

To prevent users from accidentally opening screens where they shouldn't be, we have to "remove" the authenticated screens. `react-navigation` allows us to do this by dynamically changing the navigator screen components. When changing these screens, `react-navigation` automatically moves the users over to the right screen.

Instead of using a stack navigator within a tab navigator, we will add a stack navigator as our first navigator.