Basic Navigation in React Native

Navigation is the one of the most important & complicated part of mobile application. This is one piece that we wish to focus more on this and following blogs. The more we understand navigation, better it is for the application.

From day-to-day development, there will always be additions and deletions to navigation and flow pattern's. If navigation is tightly coupled to application, we will have major re-writes for every change to navigation. This in-turn affect release cycle and over all application maintenance cost. For us to stay afloat with eternal changes that comes from BA and business, it is important for us to keep the navigation component out of rest of the application. Keep it as loosely coupled and treat it as seperate library/framework/component. This way, changes can easily be accomodated.

We will build a very basic navigation application now, as we move along, we will add additional functionalites and well as document some lessons learnt, errors and solutions.

Our index file carries nothing more than navigation definition and application level configurations. We want our startup application to kick off from stack navigator, this way we will be able to move forward and back, if/when needed.

index.ios.js/index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

import Home from './src/screens/postauthentication/home';
import Login from './src/screens/preauthentication/authentication/login';
import ForgotPassword from './src/screens/preauthentication/authentication/forgot_password';
import Signup from './src/screens/preauthentication/authentication/signup';

const PreAuth = StackNavigator({
  Login: { screen: LoginNav },
  ForgotPassword: { screen: ForgotPassword },
  Signup: { screen: Signup },
}, {
  headerMode: 'none'
})

const AppStack = StackNavigator({
  Login: { screen: Login },
  ForgotPassword: { screen: ForgotPassword },
  Signup: { screen: Signup },
});

AppRegistry.registerComponent('MoreNavigation', () => AppStack);

We have not setup the first page/component/form to show up in this navigator. ReactNative and StackNavigator makes it easy for us. It's anybodies guess. Login will be the component that will be displayed by default.

Login component is the main thread that connects to other components like 'Forgot Password' and 'Signup' form. When the user taps on Login button, he'll be redirected to 'Home' component. From a real-world perspective, we can think of this to be login page/form. Upon validation, user should be able to login to the application. While others are options to establish non-authentication flows.

Login.js

/**
 * Sample React Native App - Login.js
 * https://github.com/facebook/react-native
 * @flow
 */
import React from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';
import { NavigationActions } from 'react-navigation';

export default class LoginNav extends React.Component {
  static navigationOptions = {
    title: 'Login',
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>PreAuthentication - Login</Text>
        <View>
          <Button title='Login' onPress={ () => this.onLogin() }/>
          <Button title='Cancel' onPress={ () => this.onCancel() } />
          <View>
            <Button title='Forgot Password' onPress={ () => this.onForgotPassword() } />
            <Button title='Signup' onPress={ () => this.onSignup() } />
          </View>
        </View>
      </View>);
  }

  onLogin() {
    console.log('Login button pressed');
    // go back to main, with additional parameters and NavigationActions
    this.props.navigation.dispatch(NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Home' })
      ]
    }));

  }

  onCancel() {
    console.log('Cancel button pressed');
    // go back to main with additional parameters and NavigationActions
    // this.props.navigation.navigate('Main');
  }

  onForgotPassword() {
    console.log('ForgotPassword button pressed');
    this.props.navigation.navigate('ForgotPassword');
  }

  onSignup() {
    console.log('signup button pressed');
    this.props.navigation.navigate('Signup');
  }
}

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

Notice we have different method implementation for navigation. For us to navigate to 'Forgot Password' or 'Signup' we use props.navigation.navigate. While to go to 'Home', we use NavigationActions. Reason is simple. When we go to 'Home', user should not be able to be able to go back to logon screen unless user log's off. Even worse, post-login we don't want to see a back button in navigation bar for iOS and back button should not take the user to logon screen in Android. This requirement leads us to reset the navigation stack. This way we don't have any history to go back.

Rest of the forms are as simple as login

Signup.js

/**
 * Sample React Native App - Signup.js
 * https://github.com/facebook/react-native
 * @flow
 */
import React from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet
} from 'react-native';

export default class Signup extends React.Component {
  static navigationOptions = {
    title: 'Signup',
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>PreAuthentication - Signup</Text>
        <View>
          <Button title='Submit' onPress={() => this.onSubmit()}/>
          <Button title='Cancel' onPress={() => this.onCancel()}/>
        </View>
      </View>);
  }

  onSubmit() {
    console.log('Signup - submit button pressed');
  }

  onCancel() {
    console.log('Signup - submit button pressed');
    this.props.navigation.goBack();
  }
}

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

Forgot_password.js

/**
 * Sample React Native App - ForgotPassword.js
 * https://github.com/facebook/react-native
 * @flow
 */
import React from 'react';
import {
  View,
  Text,
  Button,
  StyleSheet,
} from 'react-native';

export default class ForgotPassword extends React.Component {
  static navigationOptions = {
    title: 'Forgot Password',
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>PreAuthentication - Forgot Password!!</Text>
        <View>
          <Button title='Submit' onPress={() => this.onSubmit()}/>
          <Button title='Cancel' onPress={() => this.onCancel()}/>
        </View>
      </View>);
  }

  onSubmit() {
    console.log('ForgotPassword - submit button pressed');
  }

  onCancel() {
    console.log('ForgotPassword - submit button pressed');
    this.props.navigation.goBack();
  }
}

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

Notice, how we go back to previous screen on 'Cancel'. If we are two or more forms down in stack, and wish to go back to root, we can pass a key parameter to 'goBack()'. Check the documentation here for more


That's it for now. A multi-layered navigation application will be added soon