React Native Navigation - React Native

What is React Native Navigation?

In this tutorial, we will be learning about how to set up navigation in React Native app.

  • Note that we will refactor lot of the code but we are going to show you the most interesting features.
  • All earlier sections in React Native used MyContainerComponent and MyPresentationalComponent. We did this to get comfortable with separation of logic and view.

Now, as we moved further with the previous concepts, we will be using the real time examples.

Step 1 - Create Files and Folders

We will explain our files and folders in below list −

  • Router.js − Router component will be placed inside src/components folder.
  • home − Home page folder. Path to this folder is src/components/home. We will create two components here HomeContainer.js and HomeButton.js
  • about − About page folder. Path to this folder is src/components/about. We will have AboutContainer.js and AboutButton.js inside.

Step 2 - Router

There are lot of things that are certain to happen in a example.

  • Navigator − Navigatorelement handles routing. We are setting initialRoute, renderScene and navigatorBar. We will go through these props later.
  • initialRoute − We are setting which route will be rendered first when we start the app. This is just an object where we are setting name (used for routing) and title (used for setting title).
  • renderScene − This is function for calculating routes. We are using route.name for this. If you check initialRoute you will see that name: 'Home' is the same as route.name == 'Home' in renderScene. This is how the app knows that initial route is Home.

We will also pass navigator and ...route.passProps so we can access everything inside rendered component.

NavigationBar − We are using NavigationBarRouteMapper prop in order to add title and buttons for navigation bar. Left button will be used as a back button while right button will only be present if route.openMenu exists. We will learn more on this, inside Home component.

Example

Step 3 - Home Components

Home is our container component. We need to pass goToAbout prop to HomeButton. Remember openMenu: this.openMenu inside push function. This will let Menu button on About screen.

src/components/home/HomeContainer.jss

Example

HomeButton is presentational component which handles styling and calls goToAbout function passed as a prop from HomeContainer.

src/components/home/HomeButton.js

Example

Step 4 - About Component

About is just an empty component.

src/components/about/AboutContainer.js

Example

Step 5 - Connect Router

Connect Router is used to router inside our app, we will place it inside index.ios.js and index.android.js

index.ios.js and index.android.js

Example

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

React Native Topics