Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


0.1.0 • Public • Published


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.

The API of this component may change in the future to be more like Navigator's, which works great once there is better support for nested Navigators in React Native.


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

$ npm install @blv/react-native-tab-navigator --save


Import TabNavigator as a JavaScript module:

import TabNavigator from '@blv/react-native-tab-navigator'

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

    selected={this.state.selectedTab === 'home'}
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    onPress={() => this.setState({ selectedTab: 'home' })}>
    selected={this.state.selectedTab === 'profile'}
    renderIcon={() => <Image source={...} />}
    renderSelectedIcon={() => <Image source={...} />}
    renderBadge={() => <CustomBadgeView />}
    onPress={() => this.setState({ selectedTab: 'profile' })}>

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
  tabBarStyle={{ height: tabBarHeight, overflow: 'hidden' }}
  sceneStyle={{ paddingBottom: tabBarHeight }}


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


npm i @blv/react-native-tab-navigator

Downloadsweekly downloads









last publish


  • avatar
  • avatar
Report a vulnerability