Black Friday Sale Upgrade Your Home →

Add Bottom Tabs to a React Native App

Add Bottom Tabs to a React Native App with React Navigation

Tabs are another popular navigation paradigm on mobile, so we’ll add tabs to the bottom of the screen, which will make it easy to switch between the primary screens of our application.

Tab navigation

🤔Tab navigation is displayed at the bottom of the interface and is usually available from all screens. Usually there is only one tab navigation that serves as the core experiences of the app.

To create tab navigation, use the createBottomTabNavigator function.

JSX
import { createBottomTabNavigator } from 'react-navigation'
...
createBottomTabNavigator(...)

As this is usually available on all screens, it is usually the root most navigator.

JSX
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'


const List = createStackNavigator(...)


const Tabs = createBottomTabNavigator({
 List: { screen: List }
})

When using tab navigation to navigate away from the current stack navigation, its position and state are retained, so when you navigate back to it, it will restore your position in the stack - no one will come and eat your pancakes while you're distracted by something else.

The createBottomTabNavigator() function also takes config options as a second parameter. This has a tabBarIcon function that can be used to set an icon for the focused tab, and an activeBackgroundColor that can be used to set the background color of the active tab.

JSX
createBottomTabNavigator({
 ...
}, {
  navigationOptions: ({ navigation }) => {
    return {
      tabBarIcon: ({ tintColor }) => {
        if (navigation.state.routeName === 'List') {
          return <Icon name='list' color={tintColor} size={22} />
        }
        if (navigation.state.routeName === 'About') {
          return <Icon name='info-circle' color={tintColor} size={22} />
        }
      }
    }
  },
  tabBarOptions: {
    activeBackgroundColor: '#E6F0FA'
  }
})

The full example looks like this.

JSX
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation'
import Icon from 'react-native-vector-icons/FontAwesome'
import RestaurantList from 'components/RestaurantList'
import RestaurantInfo from 'components/RestaurantInfo'
import About from 'components/About'


const List = createStackNavigator({
  Home: { screen: RestaurantList },
  Info: { screen: RestaurantInfo }
})


const Tabs = createBottomTabNavigator({
 List: { screen: List },
  About: { screen: About }
}, {
  navigationOptions: ({ navigation }) => {
    return {
      tabBarIcon: ({ tintColor }) => {
        if (navigation.state.routeName === 'List') {
          return <Icon name='list' color={tintColor} size={22} />
        }
        if (navigation.state.routeName === 'About') {
          return <Icon name='info-circle' color={tintColor} size={22} />
        }
      },
      tabBarOptions: {
        activeBackgroundColor: '#E6F0FA'
      }
    }
  },
})

🐦   Previous   💼   Next