---

React Native - Router

---

---

---

React Native - Router

In this chapter, we will understand navigation in React Native.

Step 1: Install Router

To begin with, we need to install the Router. We will use the React Native Router Flux in this chapter. You can run the following command in terminal, from the project folder.

Step 2: Entire Application

Since we want our router to handle the entire application, we will add it in index.ios.js. For Android, you can do the same in index.android.js.

App.js

Step 3: Add Router

Now we will create the Routes component inside the components folder. It will return Router with several scenes. Each scene will need key, component and title. Router uses the key property to switch between scenes, component will be rendered on screen and the title will be shown in the navigation bar. We can also set the initial property to the scene that is to be rendered initially.

Routes.js

Step 4: Create Components

We already have the Home component from previous chapters; now, we need to add the About component. We will add the goToAbout and the goToHome functions to switch between scenes.

Home.js

About.js

The app will render the initial Home screen

You can press the button to switch to the about screen. The Back arrow will appear; you can use it to get back to the previous screen.

---

---

Frequently Asked Questions

---

---

---

---

---