TabBar (#21)

* TabBar Initial work

* Removed badge prop

* some styling tweaks

* Updated expo

* CR fixes

* CR review continue

* Fiexd travis error

Author: adamTrz

example/src/ExampleList.js

@@ -5,6 +5,7 @@ import { ListView, TouchableHighlight, StyleSheet, Text } from 'react-native';
 
 import Buttons from './scenes/Buttons';
 import Typography from './scenes/Typography';
+import TabBar from './scenes/TabBar';
 
 type Route = {
   /* eslint-disable react/no-unused-prop-types */
@@ -22,6 +23,10 @@ const dataSource = ds.cloneWithRows([
     component: Typography,
     title: 'Typography',
   },
+  {
+    component: TabBar,
+    title: 'TabBar',
+  },
 ]);
 
 type Props = {

example/src/scenes/TabBar.js

@@ -0,0 +1,70 @@
+/* @flow */
+import React, { Component } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { TabBar, withTheme, Headline } from 'react-native-ios-kit';
+import type { Theme } from 'react-native-ios-kit/types';
+
+type Props = {
+  theme: Theme,
+};
+type State = {
+  activeTab: number,
+};
+
+class TabBarExample extends Component<Props, State> {
+  state = {
+    activeTab: 0,
+  };
+
+  selectTab = (tabIndex: number) => this.setState({ activeTab: tabIndex });
+
+  render() {
+    return (
+      <View style={styles.screen}>
+        <View>
+          <Headline>{`Active Tab: ${this.state.activeTab}`}</Headline>
+        </View>
+        <TabBar
+          tabs={[
+            {
+              icon: 'ios-paper-outline',
+              title: 'News',
+              onPress: this.selectTab,
+              isActive: this.state.activeTab === 0,
+            },
+            {
+              icon: 'ios-podium',
+              title: 'Scores',
+              onPress: this.selectTab,
+              isActive: this.state.activeTab === 1,
+            },
+            {
+              icon: 'ios-star-outline',
+              title: 'Favourites',
+              onPress: this.selectTab,
+              isActive: this.state.activeTab === 2,
+            },
+            {
+              icon: 'ios-people',
+              title: 'Disabled',
+              onPress: this.selectTab,
+              isActive: this.state.activeTab === 3,
+              disabled: true,
+            },
+          ]}
+        />
+      </View>
+    );
+  }
+}
+
+export default withTheme(TabBarExample);
+
+const styles = StyleSheet.create({
+  screen: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

src/components/TabBar.js

@@ -0,0 +1,89 @@
+/* @flow */
+import React, { PureComponent } from 'react';
+import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+
+import Icon from './Icon';
+import { Caption2 } from './Typography';
+import { withTheme } from '../';
+import type { Theme } from '../types/Theme';
+
+type TabItem = {
+  icon: string,
+  title: string,
+  onPress: (tabIndex: number) => void,
+  isActive: boolean,
+  disabled?: boolean,
+};
+
+type Props = {
+  /**
+   * Array of Tabs. Each TabItem needs to have below shape:
+   * icon: Icon name, one of https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/Ionicons.json
+   * title: string,
+   * onPress: function to be called when Tab is tapped
+   * isActive: boolean, indicating wheter Tab is active
+   * disabled?: boolean, (optional), diasables a Tab
+   */
+  tabs: Array<TabItem>,
+  /**
+   * Provided by the ThemeProvider
+   */
+  theme: Theme,
+};
+
+class TabBar extends PureComponent<Props> {
+  render() {
+    const { theme, tabs } = this.props;
+    const tabBarStyle = {
+      backgroundColor: theme.barColor,
+      borderTopColor: theme.borderColor,
+    };
+    const activeColor = theme.buttonColor;
+    const inactiveColor = theme.buttonDisabledColor;
+    return (
+      <View style={[styles.wrapper, tabBarStyle]}>
+        {tabs.map((tab, idx) => (
+          <TouchableWithoutFeedback
+            key={`tabItem_${idx}`}
+            onPress={() => tab.onPress(idx)}
+            disabled={tab.disabled || tab.isActive}
+          >
+            <View style={styles.tabItem}>
+              <Icon
+                name={tab.icon}
+                size={30}
+                color={tab.isActive ? activeColor : inactiveColor}
+              />
+              <Caption2
+                style={{
+                  color: tab.isActive ? activeColor : inactiveColor,
+                }}
+              >
+                {tab.title}
+              </Caption2>
+            </View>
+          </TouchableWithoutFeedback>
+        ))}
+      </View>
+    );
+  }
+}
+
+export default withTheme(TabBar);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    borderTopWidth: 1,
+  },
+  tabItem: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 4,
+  },
+});

src/index.js

@@ -5,4 +5,5 @@ export { default as ThemeProvider } from './core/ThemeProvider';
 
 export { default as Button } from './components/Button';
 export { default as Icon } from './components/Icon';
+export { default as TabBar } from './components/TabBar';
 export * from './components/Typography';

types.js

@@ -0,0 +1,5 @@
+/* @flow */
+
+import type { Theme as _Theme } from './src/types/Theme';
+
+export type Theme = _Theme;