React Navigation Tabs

Tab navigators for React Navigation.

Installation

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

Usage

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',
});

Documentation

• createBottomTabNavigator
• createMaterialTopTabNavigator