React Navigation

What you will learn

  • Routing and navigation for your React Native apps

👾 Before we start the exercise

  • There are others routing solutions available, keep in mind we are using the react-navigation library
  • We are using react-navigation v5.x.x (Be carreful when you random copy/paste Stack Overflow)

react-navigation

📡 Installation

Hint: You can read the Getting started

yarn add @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

👨‍🚀 Exercise 1

Hint: You can read the stack-navigator documentation

  • Create a "sitemap" of all your routes
// ./src/navigation/AppRoutes.ts

export enum AppRoutes {
  LOGIN_SCREEN = 'Login',
  TERMS_SCREEN = 'Terms',
  STARSHIP_FEED_SCREEN = 'Starships',
  STARSHIP_DETAIL_SCREEN = 'Starship',
  PILOT_PROFILE = 'Pilot',
}
  • Create a Stack Navigator in ./src/navigation/Navigator.tsx that shows the LoginScreen and the TermsScreen
  • Use LOGIN_SCREEN and TERMS_SCREEN from AppRoutes.tsas route names to maintain consistency when navigating
  • Wrap your Stack with a NavigationContainer. Hint: You can have multiple functions in the same file.
  • Update the entry point of your application.

Hint: If you are lost you can debug the changes on the NavigationContainer with:

onStateChange={state => console.log('New state is', state)}
  • We have an issue with the double header, we can fix it with some options to the Navigator
headerMode={'none'}
mode={'modal'}
initialRouteName={AppRoutes.LOGIN_SCREEN}
  • Wrap the terms link with a TouchableOpacity onPress={handleTerms}

Here is a function to navigate between screens

function handleTerms() {
  navigation.navigate(AppRoutes.TERMS_SCREEN);
}
  • Add a goBack behavior on TermsScreen.tsx