React Native TabBar Navigator (iOS only)

A component which builds excellent Navigator(NavigationController) + TabBar(TabBarController) based application, have a good solution for implementing hidesBottomBarWhenPushed in iOS.

SPECIAL NOTE FOR 0.4.0

Please don't update to 0.4.0 if you are using previous version of this plugin, because the way to use it is completely different.

UPDATEs

0.4.0 Supports React Native 0.40, optimized usages.

0.3.0 Test with several projects, and no obviously bug, so 0.3.0 will be a stable version.

0.2.8 Added a shadow style, make it more native, preview

0.2.7 Remove the hack on last commit, reason

0.2.6 Disabling the wired Y scale when pushing the view, which make it more similar to NavigatorIOS

0.2.4 Fixed a logical bug which caused a re-render issue.

0.2.3 New feature by @aerofs, title component can be customize now.

0.2 Stable Version

0.1 Project First Commit

Installation

cd to your React Native project directory and run

npm i --save react-native-tabbar-navigator

Usage

import { TabNavigator } from 'react-native-tabbar-navigator';

The basic usages:

function RootView() {
  let navItems = [
    {
      leftItem: {
        component: (<NavItemText/>),
        onPress: (isRoot, pop) => {
          ActionSheetIOS.showActionSheetWithOptions({
            options: ['View Account Info', 'My Orders', 'Sign Out'],
            destructiveButtonIndex: 2
          }, () => {});
        }
      },
      rightItem: {
        component: (<NavItemIcon/>),
        onPress: (isRoot, pop) => {
          ActionSheetIOS.showActionSheetWithOptions({
            options: ['Share', 'Scan QR Code', 'Cancel'],
            destructiveButtonIndex: 2
          }, () => {});
        }
      }
    },
    {
      title: {
        component: (<NavItemSegmentCtrl/>)
      },
      rightItem: {
        component: (<NavItemIconSettings/>),
        onPress: (isRoot, pop) => {
          ActionSheetIOS.showActionSheetWithOptions({
            options: ['Account Settings', 'App Settings', 'Cancel'],
            destructiveButtonIndex: 2
          }, () => {});
        }
      }
    }
  ];
  return (
    <TabNavigator tintColor='#FF2D55'>
      <TabNavigator.Item title='Tab One' icon={{uri: tabOneIcon, scale: 3}} navItems={navItems[0]} defaultTab>
        <TabOneIndex/>
      </TabNavigator.Item>
      <TabNavigator.Item title='Tab Two' icon={{uri: tabTwoIcon, scale: 3}} navItems={navItems[1]} badge='999+'>
        <TabTwoIndex/>
      </TabNavigator.Item>
    </TabNavigator>
  );
}

API

NOTE Be sure to know the basic usage of <Navigator/> and <TabBarIOS/>

For this plugin, there are 2 components that you need to know.

<TabNavigator/>

Property | Description | Type | Default -------- | ----------- | ---- | ------- navBarTintColor | Default font color of navigation bar. | string | '#FFFFFF' navTintColor | Default background color of navigation bar. | string | '#FF2D55' children | ONLY accepts <TabNavigator.Item/>s as children components. | Array<React.Component> | [] ...props | The other props that passed to this Component is directly passed to the corresponding <Navigator/> and override any default props in this plugin. Be sure to read the source code first, or you should not override the props below: style, initialRoute, renderScene, navigationBar, sceneStyle.

<TabNavigator.Item/>

Property | Description | Type | Default -------- | ----------- | ---- | ------- title | Title of the corresponding Tab and Navigation Title. You can customize Navigation Title by navItems property. | string defaultTab | Set this Item as default selcted tab. | bool | false navItems | Detailed API below. | Array<NavItemConfig> | REQUIRED children | ONLY accepts single child element. | React.Component | REQUIRED ...props | The other props that passed to this Component is directly passed to the corresponding <TabBarIOS.Item/>.

NavItemConfig

Property | Description | Type | Default -------- | ----------- | ---- | ------- leftItem | Component settings for TopLeft navigation item. | NavigationItem rightItem | Component settings for TopRight navigation item. | NavigationItem title | Navigation title for corresponding Tab. | string | NavigationItem | TabNavigator.Item.props.title

NavigationItem

Property | Description | Type | Default | Example -------- | ----------- | ---- | ------- | ------- component | React Component for corresponding position. | React.Component | null | <Text>More</Text> onPress | This function is passed to the component onPress prop, make sure to receive onPress in component and handle it. | NavigationItemEvent | () => {} | (isRoot, pop) => { if (isRoot) pop() }

NavigationItemEvent

This is actually a function type. When this function is called, it will pass 3 arguments.

Order | Argument | Description | Type ----- | -------- | ----------- | ---- 1 | isRoot | Is root route or not, if it is root route, you should not call the 2nd popHandler argument. | bool 2 | popHandler | A shortcut to navigator.pop, calling this can pop the current navigator. | function 3 | navigator | The current navigator.

Advanced usage

For more advanced examples, please check out the example app.

How to run the example App?

Xcode.

Questions

If something is undocumented here, and it is not clear with you, feel free to create an issue here, I will tried my best to answer you.

Anything else

Open a new issue to report bugs or request new features. Feel free to create Pull Request, I will be happy to merge if it is a good PR.

My email [email protected]

Facebook Dicky Tsang

Sina Weibo @桐乃