Merge pull request ptomasroos#57 from Structuralapp/tab-bar-position-prop

Set tab bar position above or below tabs.

Author: brentvatne

README.md

@@ -143,6 +143,7 @@ module.exports = CustomTabBar;
   the tab bar. The component has `goToPage`, `tabs`, `activeTab` and
   `ref` added to the props, and should implement `setAnimationValue` to
   be able to animate itself along with the tab content.
+- **`tabBarPosition`** _(String)_ - if `"top"`, the tab bar will render above the tabs. If `"bottom"`, the tab bar will render below the tabs. Defaults to `"top"`.
 - **`onChangeTab`** _(Function)_ - function to call when tab changes, should accept 1 argument which is an Object containing two keys: `i`: the index of the tab that is selected, `ref`: the ref of the tab that is selected
 - **`edgeHitWidth`** _(Integer)_ - region (in pixels) from the left & right edges of the screen that can trigger swipe. Default is 30, which is the same as the swipe-back gesture on iOS.
 - **`hasTouch`** _(Function)_ - returns `true` when ScrollableTabView starts being panned and `false` when it is released. Not triggered when `locked` (Bool) is true.

index.js

@@ -16,6 +16,7 @@ var deviceWidth = Dimensions.get('window').width;
 var ScrollableTabView = React.createClass({
   getDefaultProps() {
     return {
+      tabBarPosition: 'top',
       edgeHitWidth: 30,
       springTension: 50,
       springFriction: 10
@@ -106,17 +107,21 @@ var ScrollableTabView = React.createClass({
       inputRange: [0, 1], outputRange: [0, -deviceWidth]
     });
 
+    var tabBarProps = {
+      goToPage: this.goToPage,
+      tabs: this.props.children.map((child) => child.props.tabLabel),
+      activeTab: this.state.currentPage,
+      scrollValue: this.state.scrollValue
+    };
+
     return (
       <View style={{flex: 1}}>
-        {this.renderTabBar({goToPage: this.goToPage,
-                            tabs: this.props.children.map((child) => child.props.tabLabel),
-                            activeTab: this.state.currentPage,
-                            scrollValue: this.state.scrollValue})}
-
+        {this.props.tabBarPosition === 'top' ? this.renderTabBar(tabBarProps) : null}
         <Animated.View style={[sceneContainerStyle, {transform: [{translateX}]}]}
           {...this._panResponder.panHandlers}>
           {this.props.children}
         </Animated.View>
+        {this.props.tabBarPosition === 'bottom' ? this.renderTabBar(tabBarProps) : null}
       </View>
     );
   }