Bottom tab navigation in React native

I’ve recently started working with react native and guess what? I’m not going back to any framework or technology for frontend! It’s as good as it can be and if you’re also new to react and things aren’t making sense as of now, hold on! It will get better 👍

Today we’re going to learn:

• react-navigation-stack to create a simple browser like stack for screens in a mobile app
• implementing a bottom tab navigation using react-navigation and react-navigation-tabs
• bonus (yes! why not?) react-native-vector-icons integration to make your app look cooler 🔥

Here is a snapshot of the final result that we’ll be building

Create a simple react-native project using npx react-native init AwesomeProject

Let’s setup!

First things first! We need the following packages so add these lines to the ‘dependencies’ object of your package.json file. I would recommend using these packages as it is because there was a lot of version mis management while I was trying it for the first time.

“react-navigation”: “^4.3.9”,

“react-navigation-stack”: “^2.7.0”,

“react-navigation-tabs”: “^2.10.1”,

“react-native-vector-icons”: “^7.1.0”,

Finally do a npm install and we’re done. Let’s dive into coding!!

Create a navigation service

Create a file NavigationService.js and copy paste the following code in it. This file export two functions, setTopLevelNavigator is where we’ll be passing the navigation reference from our App.js file (It’s discussed in next section, pheww!!!).

Want to read this story later? Save it in Journal.

Then we have a function navigate which takes two params, routeName i.e name of the new route and params, any parameters you’d like to pass to the new screen which we’re navigating to.

In navigate function we’ve just dispatched an action on navigation reference. There are other actions too in NavigationActions. I’d like you to explore some and figure out a pop function in your NavigationService file which will allow us to move back programmatically. Let me know in the comments how close you got!!

Define the stack of your app

Yes! We have a seperate pre defined structure for a navaigation stack. Let’s understand some functions from ‘react-navigation’ before getting into code

createStackNavigator(RouteConfigs, StackNavigatorConfigs)

This creates a stack of all your screens where each new screen is placed over new one. By default it provides ios and android look and feel. A very simple way of defining a stack would be;

const appStack = createStackNavigator(
   {
      //Route name
      HomeScreen:{
         screen: HomeScreenComponent //React component for home screen
      },
   }
)

Here we have only one screen i.e Home. We can add as many screens as our app demands here. Note that these screens will be placed on top of each other while navigating. Now for our bottom tab implementation we want something else.

createBottomTabNavigator(RouteConfigs, TabConfigs)

This will create a tab like component at the bottom of the screen. The route configs can be similar to the createStackNavigator function. But in this case, The screens would be not be rendered on top of each other. Instead they will give a bottom nav type of look and feel.

The second param in both these functions are optional and are used based on usage. We’ll be using some of them and I’ll explain them on the go

So now create a new file AppNavigation.js

We need a bottom tab with three screens which can be created with

import { createBottomTabNavigator } from 'react-navigation-tabs'
//example home screen
const HomeScreen = (props) => {
  return (
    <View>
       <Text>Hello from home screen</Text>
    </View>
  );
}
const bottomTabNav = createBottomTabNavigator(
{
   HomeScreen: {
    screen: HomeScreen
   },
   AddScreen: {
    screen: AddScreen
   },
   SettingsScreen: {
    screen: SettingsScreen
   },
   //add other tabs here
},
{
   initialRouteName: 'HomeScreen' //Name of the preselected tab
}
)

But we also need a stack navigator where Home can be the Bottom nav screen we created above using createBottomTabNavigator and other screens in the stack can be there as well. So create a stack navigator in your AppNavigator.js like this

import { createStackNavigator } from 'react-navigation-stack'
const AppStack = createStackNavigator(
  {
    Home: {
      screen: bottomTabNav  //bottom tab
    },
    //add other screens here
  }
)

Now finally wrap your AppStack using createAppContainer from ‘react-navigation’ and export it. We need to wrap our complete app in this container

import { createAppContainer } from 'react-navigation'
const AppContainer = createAppContainer(AppStack)
export default AppContainer;

Finally wrap your app with the AppContainer we just created. With app container we get a prop ref with the navigation reference (navigationRef). Remember out setTopLevelNavigator function from NavigationService.js file? Set the reference using it.

import { setTopLevelNavigator } from 'NavigationService';
const App = () => {
  return (
    <AppContainer
       ref={navigationRef => {
          NavigationService.setTopLevelNavigator(navigationRef)
       }}
     />
  );
};

And we’re done! You could now see a simple bottom tab in your app. But that doesn’t look good right? Time for some decoration!!

Adding vector icons and tintcolors

Update your code of bottomTabNav to add some custom features

import { BottomTabBar } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/dist/Ionicons';
const bottomTabNav = createBottomTabNavigator(
{
   HomeScreen: {
    screen: HomeScreen
   },
   AddScreen: {
    screen: AddScreen
   },
   SettingsScreen: {
    screen: SettingsScreen
   },
   //add other tabs here
},
{
   initialRouteName: 'HomeScreen',
   tabBarComponent: (props) => <BottomTabBar {...this.props)/>,
   defaultNavigationOptions: ({ navigation }) => ({
     tabBarIcon: ({focused, horizontal, tintcolor}) => {
       const { routeName } = navigation.state;
       let iconName;
       if (routeName === 'HomeScreen') {
         iconName = focused? 'home': 'home-outline';
       } else if (routeName === 'Settings') {
         iconName = focused? 'cog': 'cog-outline';
       } else if(routeName === 'Add') {
         iconName = 'add'
       }
       return <Icon 
                name={iconName} 
                size={25} 
                color={focused? 'tomato': 'grey'} />;
     },
   }),
   tabBarOptions: {
     activeTintColor: 'tomato',
     inactiveTintColor: 'grey'
   }
}
)

Save and reload! Now your app would be having a bottom nav with custom icons and a reddish tint.

Finally you learnt how to implement navigation in a react-native applications. As a next challenge you can try implementing a drawer navigation. Let me know in the comments if you get stuck anywhere.

React out to me on twitter or instagram 👋

You can read more about the react-navigation at their official documentation.

Don’t forget to check out more of these helpful articles at my page.

📝 Save this story in Journal.