TabBar Component

.babelrc

@@ -1,6 +1,3 @@
 {
-  "plugins": [
-       "transform-class-properties"
-   ],
-  "presets": ["stage-0", "es2015", "react"]
-}
+  "presets": ["react-native-stage-0"]
+}

components/demo/ExampleList.js

@@ -15,7 +15,8 @@ import ErrorPage from './ErrorExample'
 import LoadingPage from './LoadingExample'
 import IconsExample from './IconsExample'
 import ImageExample from './ImageExample'
-import NavbarExample from './NavBarExample'
+import NavBarExample from './NavBarExample'
+import TabBarExample from './TabBarExample'
 import AllTogetherNow from './AllTogetherNow'
 
 
@@ -52,7 +53,11 @@ const Examples: Array<WidgetExample> = [
   },
   {
     name: 'NavBar',
-    module: NavbarExample
+    module: NavBarExample
+  },
+  {
+    name: 'TabBar',
+    module: TabBarExample
   },
   {
     name: 'Rows',

components/demo/TabBarExample.js

@@ -0,0 +1,43 @@
+import React, {PropTypes} from 'react'
+import {
+  View,
+  Text,
+  ScrollView,
+  Platform
+} from 'react-native'
+
+import {
+  Base,
+  TabBar
+} from '../panza'
+
+function noop() {
+}
+
+export default class NavBarExample extends React.Component {
+  render() {
+    return (
+      <ScrollView>
+
+          <TabBar
+            tabs={['First', 'Second', 'Third']}
+            goToPage={noop}
+            my={2}
+          />
+
+          <TabBar
+            tabs={['First', 'Second', 'Third', 'Fourth']}
+            underlineColor='green'
+            activeTextColor='green'
+            underlineHeight={4}
+            height={60}
+            activeTab={2}
+            backgroundColor='black'
+            onTabPress={noop}
+            my={2}
+          />
+
+      </ScrollView>
+    )
+  }
+}

components/panza/Nav/TabBar.js

@@ -0,0 +1,141 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Animated,
+  TouchableOpacity,
+  LayoutAnimation,
+  Dimensions
+} from 'react-native';
+import { Base, TextBase } from '../Base'
+
+export default class TabBar extends Component {
+  static propTypes = {
+    onTabPress: React.PropTypes.func,
+    activeTab: React.PropTypes.number,
+    tabs: React.PropTypes.array,
+    width: React.PropTypes.number,
+    height: React.PropTypes.number,
+    underlineColor: React.PropTypes.string,
+    underlineHeight: React.PropTypes.number,
+    backgroundColor: React.PropTypes.string,
+    activeTextColor: React.PropTypes.string,
+    inactiveTextColor: React.PropTypes.string,
+    textProps: Text.propTypes.style,
+    tabStyle: View.propTypes.style,
+    containerStyle: View.propTypes.style
+  };
+  static defaultProps = {
+    height: 40,
+    activeTextColor: 'primary',
+    inactiveTextColor: 'secondary',
+    underlineColor: 'primary',
+    backgroundColor: 'white',
+    underlineHeight: 2,
+    onTabPress: () => {}
+  };
+
+  constructor(props) {
+    super(props);
+    const { activeTab, width, tabs } = props;
+
+    this.width = width || Dimensions.get('window').width;
+    this.state = {
+      left: activeTab ? activeTab * this.width / tabs.length : 0,
+      activeTab: activeTab || 0
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.activeTab !== this.props.activeTab) {
+      LayoutAnimation.easeInEaseOut();
+      this.setState({
+        left: nextProps.activeTab * this.width / nextProps.tabs.length,
+        activeTab: nextProps.activeTab
+      });
+    }
+  }
+
+  onTabPress(i) {
+    LayoutAnimation.easeInEaseOut();
+    this.setState({
+      left: i * this.width / this.props.tabs.length,
+      activeTab: i
+    });
+    this.props.onTabPress(i);
+  }
+
+  renderTabOption(name, i) {
+    const isTabActive = this.state.activeTab === i;
+    const { activeTextColor, inactiveTextColor, textProps } = this.props;
+    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
+
+    return (
+      <TouchableOpacity
+        style={{ flex: 1 }}
+        key={name}
+        onPress={() => {
+          this.onTabPress(i)
+        }}
+      >
+        <View style={[styles.tab, this.props.tabStyle]}>
+          <TextBase color={textColor} {...textProps}>
+            {name}
+          </TextBase>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  render() {
+    const {
+      height,
+      underlineHeight,
+      underlineColor,
+      backgroundColor,
+      containerStyle,
+      tabs,
+      ...other
+    } = this.props;
+    const numberOfTabs = tabs.length;
+
+    const tabUnderlineStyle = {
+      position: 'absolute',
+      width: this.width / numberOfTabs,
+      height: underlineHeight,
+      bottom: 0
+    };
+
+    return (
+      <Base
+        baseStyle={[styles.container, { height }, containerStyle]}
+        backgroundColor={backgroundColor}
+        {...other}
+      >
+        {tabs.map((tab, i) => this.renderTabOption(tab, i))}
+        <Base
+          Component={Animated.View}
+          backgroundColor={underlineColor}
+          style={[tabUnderlineStyle, { left: this.state.left }]}
+        />
+      </Base>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  container: {
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ccc',
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  }
+});
+

components/panza/Nav/index.js

@@ -4,12 +4,14 @@ import NavIconContainer from './NavIconContainer'
 import NavTouchableIcon from './NavTouchableIcon'
 import NavTouchableText from './NavTouchableText'
 import SubNav from './SubNav'
+import TabBar from './TabBar'
 
 export {
   NavIconContainer,
   NavTouchableIcon,
   NavBar,
   NavTitle,
   NavTouchableText,
-  SubNav
+  SubNav,
+  TabBar
 }

package.json

@@ -36,35 +36,30 @@
     "react-native-vector-icons": "^2.0.3"
   },
   "devDependencies": {
-    "chai": "^3.5.0",
-    "enzyme": "^2.3.0",
-    "mocha": "^2.5.3",
     "autoprefixer": "^6.3.6",
     "babel-cli": "^6.8.0",
     "babel-core": "^6.9.1",
     "babel-loader": "^6.2.4",
-    "babel-plugin-transform-class-properties": "^6.9.1",
-    "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-polyfill": "^6.9.1",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "babel-preset-stage-1": "^6.5.0",
+    "babel-preset-react-native-stage-0": "^1.0.1",
+    "chai": "^3.5.0",
     "cookie-parser": "^1.4.2",
     "cookie-session": "^1.2.0",
     "css-loader": "^0.23.1",
+    "enzyme": "^2.3.0",
     "errorhandler": "^1.4.3",
     "express": "^4.13.4",
     "extract-text-webpack-plugin": "^1.0.1",
     "invariant": "^2.2.1",
+    "mocha": "^2.5.3",
     "morgan": "^1.7.0",
     "postcss-loader": "^0.9.1",
     "react": "^15.1.0",
     "react-addons-test-utils": "^15.1.0",
     "react-docgen": "^2.8.2",
     "react-dom": "^15.1.0",
-    "react-native-mock": "^0.2.3",
     "react-native": "^0.28.0",
+    "react-native-mock": "^0.2.3",
     "react-native-web": "git+https://github.com/bmcmahen/react-native-web.git",
     "rimraf": "^2.5.2",
     "style-loader": "^0.13.1",