Skip to content
A tab bar that switches between scenes, written in JS for cross-platform support
Branch: master
Clone or download
ptomasroos Merge pull request #190 from hakuna/tab-accessibility-labels
Add accessible and accessibilityLabel props for testability
Latest commit 2efb25f Apr 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Added ISSUE_TEMPLATE.md Aug 15, 2018
config migrate deprecated React.PropTypes and View.propTypes Jul 12, 2017
example/TabDemo
.gitignore initial example and implement android Apr 10, 2017
Badge.js Modify the font size Mar 6, 2018
CHANGELOG Added CHANGELOG Aug 22, 2017
LICENSE Initial commit Aug 25, 2015
Layout.js [Layout] Add bottom padding to each scene Sep 11, 2015
README.md
StaticContainer.js migrate deprecated React.PropTypes and View.propTypes Jul 12, 2017
Tab.js Add `accessible` and `accessibilityLabel` props for testability Mar 1, 2019
TabBar.js migrate deprecated React.PropTypes and View.propTypes Jul 12, 2017
TabNavigator.js Add `accessible` and `accessibilityLabel` props for testability Mar 1, 2019
TabNavigatorItem.js migrate deprecated React.PropTypes and View.propTypes Jul 12, 2017
demo.gif update Readme Apr 10, 2017
package.json Bumped version for new release Aug 22, 2017

README.md

TabNavigator

A tab bar that switches between scenes, written in JS for cross-platform support. It works on iOS and Android.

This component is compatible with React Native 0.16 and newer.

The look and feel is slightly different than the native navigator but it is better in some ways. Also it is pure JavaScript.

Note: This is not the same TabNavigation component that is used in ExNavigation, the API and implementations are slightly different -- react-native-tab-navigator stands on its own and does not depend on any other navigation library.

Demo

For demo, please check the example folder

demo

Install

Make sure that you are in your React Native project directory and run:

npm install react-native-tab-navigator --save

Usage

Import TabNavigator as a JavaScript module:

import TabNavigator from 'react-native-tab-navigator';

This is an example of how to use the component and some of the commonly used props that it supports:

<TabNavigator>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'home'}
    title="Home"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    badgeText="1"
    onPress={() => this.setState({ selectedTab: 'home' })}>
    {homeView}
  </TabNavigator.Item>
  <TabNavigator.Item
    selected={this.state.selectedTab === 'profile'}
    title="Profile"
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>
    {profileView}
  </TabNavigator.Item>
</TabNavigator>

See TabNavigatorItem's supported props for more info.

Hiding the Tab Bar

You can hide the tab bar by using styles. For example:

let tabBarHeight = 0;
<TabNavigator
  tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
  sceneStyle={{ paddingBottom: tabBarHeight }}
/>

Props

TabNavigator props

prop default type description
sceneStyle inherited object (style) define for rendered scene
tabBarStyle inherited object (style) define style for TabBar
tabBarShadowStyle inherited object (style) define shadow style for tabBar
hidesTabTouch false boolean disable onPress opacity for Tab

TabNavigator.Item props

prop default type description
renderIcon none function returns Item icon
renderSelectedIcon none function returns selected Item icon
badgeText none string or number text for Item badge
renderBadge none function returns Item badge
title none string Item title
titleStyle inherited style styling for Item title
selectedTitleStyle none style styling for selected Item title
tabStyle inherited style styling for tab
selected none boolean return whether the item is selected
onPress none function onPress method for Item
allowFontScaling false boolean allow font scaling for title
accessible none boolean indicates if this item is an accessibility element
accessibilityLabel none string override text for screen readers
testID none string used to locate this item in end-to-end-tests
You can’t perform that action at this time.