Monday, October 22, 2018

React Native Route Configuration Example Using React Navigation Library

In this tutorial, we are providing the simple example to setup initial route configuration using react navigation library in react native application. As you already know React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens. Routing configuration setup part is very easy and simple, we will provide simple guide to setup route using createStackNavigator function. 

react-navigation version : 2.6.2

In our previous tutorial, we have provided simple guide to setup header bar in react native application using React Navigation Library. Check out the below if you want to learn about it.

React Native Route Configuration Example Using React Navigation Library


React Native Initial Route Configuration Example :

Lets follow the below steps to setup initial route configuration in react native application, that helps user during the screens transition.



Step-1 :  Install the react-navigation package in your React Native project. Refer the below screenshot, while installing react navigation package.
Command :
npm install --save react-navigation



Once installation complete check you package.json file in react native application. You  will find  react-navigation installed version in dependencies section.
{
  "name": "MobileApp56",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-navigation": "^2.6.2"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.3.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Step-2 Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-3: Open index.android.js  / index.ios.js  in your favourite code editor and erase all code and follow this tutorial.

Step-4: Through react , react-native  packages import all required components. Also in this example we have included additional import from react-navigation package.
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, YellowBox } from "react-native";
import { createStackNavigator } from "react-navigation";

Step-5: Create HomeActivity class inside the app.js file.
  •  Add static navigationoptions object inside the class. A HomeActivity component consists of a static property called navigationOptions which is an object that returns an object that contains various configuration options. Using the static navigationoptions  we can set our activity title name, color and font weight.
  • Implement render method and return Text component wrapped by root View component.
class HomeActivity extends Component {
  /* The header config from HomeScreen is now here */
  static navigationOptions = {
    title: "Home",
    headerStyle: { 
      backgroundColor: "#00a152"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

Step-6 : Add <RootStack /> component inside the app.js file and all the route configuration is specified in the options parameter to the createStackNavigator function. For example : In createStackNavigator function we are setting the route configuration as Home for HomeActivity Component.
const RootStack = createStackNavigator(
{
  Home: { screen: HomeActivity  }
},
{
    initialRouteName: 'Home',
}
);

Step-7 : As you know In React Native, the component exported from App.js is the entry point (or root component) for react app and in order to get complete access or control over the RootStack component, we need to wrapped by root View component inside the render block.
So let's export a component that just renders our RootStack stack navigator.
export default class App extends Component {
  render() {
    return <RootStack />;
  }
}

Step-8 : During the design phase, you may have seen yellow color warning box  just below the main screen. Lets use the below line of code, it will hide the warning message in your application. For that you need ignoreWarnings function and specify the warning message parameters that you want to hide. In our case we getting below messages.
YellowBox.ignoreWarnings([
  "Warning: isMounted(...) is deprecated",
  "Module RCTImageLoader"
]);

Step-9 : Apply the below style sheet design.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to step initial route configuration in react native application.
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, YellowBox } from "react-native";
import { createStackNavigator } from "react-navigation";


class HomeActivity extends Component {
  /* The header config from HomeScreen is now here */
  static navigationOptions = {
    title: "Home",
    headerStyle: {
      backgroundColor: "#00a152"
    },
    headerTintColor: "#fff",
    headerTitleStyle: {
      fontWeight: "bold"
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const RootStack = createStackNavigator(
{
  Home: { screen: HomeActivity  }
},
{
    initialRouteName: 'Home',
}
);

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

YellowBox.ignoreWarnings([
  "Warning: isMounted(...) is deprecated",
  "Module RCTImageLoader"
]);


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#e5e5e5"
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10
  }
});

Screenshot : 
React Native Route Configuration Example Using React Navigation Library

Download link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Route%20Configuration%20Example%20Using%20React%20Navigation%20Library

This is all about react native initial route configuration. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


1 comment: