Socket
Socket
Sign inDemoInstall

react-native-tab-navigator

Package Overview
Dependencies
6
Maintainers
12
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-tab-navigator

A tab bar that switches between scenes, written in JS for cross-platform support


Version published
Maintainers
12
Weekly downloads
8,270
increased by39.55%

Weekly downloads

Readme

Source

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.

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

propdefaulttypedescription
sceneStyleinheritedobject (style)define for rendered scene
tabBarStyleinheritedobject (style)define style for TabBar
tabBarShadowStyleinheritedobject (style)define shadow style for tabBar
hidesTabTouchfalsebooleandisable onPress opacity for Tab

TabNavigator.Item props

propdefaulttypedescription
renderIconnonefunctionreturns Item icon
renderSelectedIconnonefunctionreturns selected Item icon
badgeTextnonestring or numbertext for Item badge
renderBadgenonefunctionreturns Item badge
titlenonestringItem title
titleStyleinheritedstylestyling for Item title
selectedTitleStylenonestylestyling for selected Item title
tabStyleinheritedstylestyling for tab
selectednonebooleanreturn whether the item is selected
onPressnonefunctiononPress method for Item
allowFontScalingfalsebooleanallow font scaling for title

Keywords

FAQs

Last updated on 22 Aug 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc