Introduction to React Navigation and Navigators in React Native

Get started with the iOS and Android supported react-navigation library

When not to use?

Installation

yarn add react-navigationornpm install --save react-navigation

Understanding Navigators

Tab navigation, drawer modals, stacks (hierarchy) and custom navigator models

Shop App Example

The navigation structure of my shop app
const { navigation } = this.props;onPress={() => 
navigation.navigate('NavigatorScreen',
{ additionalData: 'supported!',
productId: 123 })
}

Implementing Navigators

import React from 'react';
import { createBottomTabNavigator,
createStackNavigator } from 'react-navigation';
...
export default class MyApp extends React.Component { render() {
return(<AppTabNavigator />);
}
}
//configure navigators...
import { CatalogueScreen, 
CategoryScreen,
ProductScreen,
SearchScreen,
SearchResultsScreen,
BagScreen } from './MyScreens';

const CatalogueNavigator = createStackNavigator({
Catalogue: CatalogueScreen,
Category: CategoryScreen,
Product: ProductScreen
}, {
//configuration options...
});
const SearchNavigator = createStackNavigator({
SearchHome: SearchScreen,
SearchResults: SearchResultsScreen
}, {
//configuration options...
});
const AppTabNavigator = createBottomTabNavigator({
Catalogue: CatalogueNavigator,
Search: SearchNavigator,
Bag: BagScreen,
},{

navigationOptions: ({ navigation }) => ({
//define the icon for each tab here...
}),
tabBarOptions: {
initialRouteName: 'Catalogue',
activeTintColor: '#fff',
inactiveTintColor: '#ddd',
style: {
backgroundColor: '#4d535e',
}
}
});

Configuring the Tab Icons

import Ionicons from 'react-native-vector-icons/Ionicons';...navigationOptions: ({ navigation }) => ({   tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;

let icon;
switch(routeName) {
case 'Catalogue':
icon = `ios-shop${focused ? '' : '-outline'}`;
break;
case 'Search':
icon = `ios-search${focused ? '' : '-outline'}`;
break;
case 'Bag':
icon = `ios-appstore${focused ? '' : '-outline'}`;
break;
}

return <Ionicons
name={icon}
size={25}
color={tintColor} />;
},
}),
...

Where to go from here

Programmer and Author. Director @ JKRBInvestments.com. Creator of LearnChineseGrammar.com for iOS and Android.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store