React Native TabBar Navigator (aka React Native Tanner Navigator)

THIS PACKAGE IS NO LONGER MAINTAINED SINCE 2017 AND DOES NOT WORK WITH LATEST REACT NATIVE

(aka React Native Tanner Navigator). 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 @桐乃