react-native-tabbar-view v1.0.5

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

This component is compatible with React Native 0.16 and newer.

this is copied from https://github.com/happypancake/react-native-tab-navigator. Also it is pure JavaScript.

Note: This react-native-tabbar-view justs a tabbar view,you can use it with react-navigation.

Install

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

npm install react-native-tabbar-view --save

Demo

Usage

Import TabBarContainer as a JavaScript module:

import TabBarContainer from 'react-native-tabbar-view';

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

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

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

Props

TabBarContainer props

TabBarContainer.Item props