Navigating React Native apps using React Navigation - Part Three

Using drawer navigation

To immediately begin implementing drawer navigation, replace createBottomTabNavigator in the code with createDrawerNavigator.

Let’s start at the import statements:

import { createDrawerNavigator, createAppContainer } from "react-navigation";

Let’s also update the AppNavigator variable:

const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Contact: {
    screen: ContactScreen
  }
}, {
    initialRouteName: "Home"
  });

If you npm start, you should be able to see the changes right away. Swipe from the left to see the drawer navigation.

You can customize your drawer navigation by adding icons beside the route names. In the assets folder of this project, there are currently three icons:

We can customize by adding navigationOptions to the following screen component files:

// in HomeScreen.js

import React, { Component } from 'react';
import { Button, View, Text, Image, StyleSheet } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class HomeScreen extends Component {

  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('../assets/home-icon.png')}
        style={[styles.icon, { tintColor: tintColor }]}
      />
    ),
  };

  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to About"
          onPress={() => this.props.navigation.navigate('About')}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  }
});

// in AboutScreen.js

import React, { Component } from 'react';
import { Button, View, Text, Image, StyleSheet } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class AboutScreen extends Component {

  static navigationOptions = {
    drawerLabel: 'About',
    drawerIcon: ({ tintColor }) => (
      
    ),
  };
  render() {
    return (
      
        About Screen
      
    )
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  }
});

// in ContactScreen.js

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

export default class ContactScreen extends Component {

  static navigationOptions = {
    drawerLabel: 'Contact',
    drawerIcon: ({ tintColor }) => (
      
    ),
  };

  render() {
    return (
      
        Contact Screen
      
    )
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  }
});

The tintColor prop lets you apply any color based on active or inactive states of navigation tabs and labels. For example, we can change the active state color for our nav drawer labels. Go to the AppNavigator variable and add to the options object:

const AppNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  },
  Contact: {
    screen: ContactScreen
  }
}, {
    initialRouteName: "Home",
      contentOptions: {
        activeTintColor: '#e91e63'
     }
  });

This results in a change of color:

Passing parameters to screens

There are two simple steps to pass params to routes:

1. Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function:

   this.props.navigation.navigate('RouteName', { /* params go here */ })

2. Read the params in your screen component:

   this.props.navigation.getParam(paramName, defaultValue)

Conclusion

I hope that this article will jumpstart your use of the React Navigation package in your existing or future React Native projects. There’s a lot more that can be done; most of your needs will be met by this package. Feel free to explore more of the documentation 

Plug: LogRocket, a DVR for web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stack traces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

If you are looking forward to learning React Native, consider subscribing to my newsletter. By subscribing you will be able to read all of my tutorials straight from your inbox