Skip to content
This repository has been archived by the owner on Feb 25, 2020. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

This package has been moved to

React Navigation Tabs

Build Status Version MIT License

Tab navigators for React Navigation.


Follow the instructions on the the React Navigation "Getting Started" guide, and then add the react-navigation-tabs package to your project.


The package exports two different navigators:

  • createBottomTabNavigator: iOS like bottom tabs.
  • createMaterialTopTabNavigator: Material design themed top tabs with swipe gesture, from react-native-tab-view.

You can import individual navigators and use them:

import { createBottomTabNavigator } from 'react-navigation-tabs';

export default createBottomTabNavigator({
  Album: { screen: Album },
  Library: { screen: Library },
  History: { screen: History },
  Cart: { screen: Cart },

You can install another package, react-navigation-material-bottom-tabs, to use a third type of tab navigator:

  • createMaterialBottomTabNavigator: Material design themed animated bottom tabs, from react-native-paper.
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

export default createMaterialBottomTabNavigator(
    Album: { screen: Album },
    Library: { screen: Library },
    History: { screen: History },
    Cart: { screen: Cart },
    initialRouteName: 'Album',
    activeTintColor: '#F44336',

Development workflow

To setup the development environment, open a Terminal in the repo directory and run the following:

yarn bootstrap

While developing, you can run the example app with Expo to test your changes:

yarn example start

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typescript
yarn lint

To fix formatting errors, run the following:

yarn lint --fix