Navigating React Native apps using React Navigation - Part Two

 Using tab navigation

Most mobile apps have more than one screen. A common style of navigation in such mobile apps is tab-based navigation. Here we will focus on how to implement tab navigation using createBottomTabNavigator.

Let’s add another screen in our app by creating a ContactScreen.js file under /components.

import React, { Component } from 'react'

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

Now let’s add to the imports at the top of our App.js file:

import ContactScreen from './components/ContactScreen';

Recall that it is useful to implement our navigation in the root App.js component. Therefore, we will implement our tab navigation by importing createBottomTabNavigator in App.js. Let’s replace createStackNavigator:

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

Also replace createStackNavigator with createBottomTabNavigator in the AppNavigator object:

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

Add the new screen to the navigator object:

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

If you run the app with npm start and open it on your Expo client, you should see the bottom nav implemented.

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