React Navigation

Apps are usually set of stacked views. i.e., React native Components can be presented as stacked views.

react-navigation

React Navigation is born from the React Native community’s need for an extensible yet easy-to-use navigation solution written entirely in JavaScript (so you can read and understand all of the source), on top of powerful native primitives.

Installation

Let’s create a new project using $ react-native init MyReactNavProject

$ cd MyReactNavProject

Add the react-navigation and react-native-gesture-handler modules by executing

$ npm install --save react-navigation

$ npm install --save react-navigation-gesture-handler

also link react-navigation-gesture-handler native dependencies with iOS and Android

$ react-native link react-navigation-gesture-handler

Create Routing

First we should create a routing structure.

  • Define component with a routing name.
  • Define which component will be loaded first and Its identity (by route name).

We will comeback to the routing after creating required screen views (Components)

create folder screens. and create Main.js and Next.js files inside screens folder.

Main.js

import React, { Component } from 'react';
import { Button, View } from 'react-native';

export default class Main extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Button title="Click this" onPress={() => { this.props.navigation.navigate('Next') }} />
            </View>
        );
    }
}

Next.js

import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class Next extends Component {
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
        <Text>This is Next Screen</Text>
      </View>
    );
  }
}

Now we have two component files, Now we can create a route.

Create file called MyAppNavigator.js in root (same directory where App.js is located)

Here we are going to create a stackNavigator and an AppContainer using createStackNavigator and createAppContainer respectively

createStackNavigator

React Navigation’s stack navigator provides a way for your app to transition between screens and manage navigation history.

createAppContainer

Containers are responsible for managing your app state and linking your top-level navigator to the app environment.

In Simple terms, StackNavigator is Route and AppContainer is a Component and keep the StackNavigator wrapped within it.

MyAppNavigator.js

import React, {Component} from 'react';
import {createAppContainer,createStackNavigator} from 'react-navigation';
import Main from './screens/Main';
import Next from './screens/Next';

const Route = createStackNavigator(
    {
        Home:{screen:Main},
        Next:{screen:Next}
    },
    {
        initialRouteName:'Home'
    }
);

const AppContainer = createAppContainer(Route);

export default class MyComponent extends Component{
    render(){
        return <AppContainer/>
    }
}

The createStackNavigator function expects two parameters.

  • Routing name and Component object specified as screen property
  • Initial Route name.

Create the AppContainer object (Remember it creates a Component instance hence the start upper case letter)

Finally update the App.js

import React, {Component} from 'react';
import MyComponent from './MyAppNavigator';

export default class App extends Component {
  render() {
    return <MyComponent/>
  }
}

This produce the output when executing $ react-native run-android

Look at the navigation bar on the top. Also it hosts a back button when navigating from Home screen to Next Screen.

Download source code

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *