Key Concepts

Review core concepts you need to learn to master this subject

Stack Navigation

In the stack navigation pattern, a user has to go from screen to screen to navigate through all screens, where each one is pushed on a stack. The only UI rendered is a header with the screen title and a back button.

Navigation
Lesson 1 of 1
  1. 1
    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…
  2. 2
    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 th…
  3. 3
    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 al…
  4. 4
    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. Every…
  5. 5
    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-interfa…
  6. 6
    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 n…
  7. 7
    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 action…
  8. 8
    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….
  9. 9
    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 ba…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo