The Overall Plan:
Add navigation to an existing React-Native app built using Expo.
We’ll be using the React Navigation package.
Step One: Installation
npm install --save react-navigation
Step Two: Configure Root
To connect the navigation system across all of the different screens/components, the root dom element needs to be setup with a list of all our components. Then we can link back and forth between them.
Note: Whichever component you put for ‘initialRouteName’ will be the component loaded when the app starts. During development I typically make this whichever page I am working on.
Step Three: Top Level Components
Inside each component that is a link in the menu we need to add code to handle the ‘Next’ and ‘Back’ links and the title of the current page.
Step Four: Next / Back Components
We need 2 components to handle our ‘Back’ and ‘Next’ links in the navigation menu. You can pass variables through these links to manage state for your app. We’ll talk more about that in the next step.
HeaderBack.js and HeaderNext.js:
Step Five: Linking To Pages
This is how to link to another component and also pass parameters to that component.
In the receiving component you access the parameters passed to you like so…