/react-navigation-tabs

Tab Navigators for React Navigation

Primary LanguageJavaScriptMIT LicenseMIT

React Navigation Tabs

Build Status Version MIT License

Tab navigators for React Navigation.

About this fork

Added the ability to hide specific titles from the tab bar

usage:

in tabBarOptions add tabKeyToHideLabel where it contains a string of the tabs names to hide, Example:

const MainTabsNavigation = createMaterialTopTabNavigator( { Discover: DiscoverTab, Messages: MessagesTab, Notifications: NotificationsTab, Profile: ProfileTab }, { .... tabBarOptions: { ... tabKeyToHideLabel: 'ProfileNotifications', .... } } );

Installation

With react-navigation@^2.0.0, no installation is required.

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';

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