Merge pull request ptomasroos#167 from Instrument/overlayTabBar

Adds tabBarPosition 'overlayTop', 'overlayBottom' with docs, example

Author: skv-headless

DefaultTabBar.js

@@ -71,7 +71,7 @@ var DefaultTabBar = React.createClass({
     });
 
     return (
-      <View style={[styles.tabs, {backgroundColor : this.props.backgroundColor || null}]}>
+      <View style={[styles.tabs, {backgroundColor : this.props.backgroundColor || null}, this.props.style, ]}>
         {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
         <Animated.View style={[tabUnderlineStyle, {left}]} />
       </View>

README.md

@@ -1,3 +1,4 @@
+
 ## react-native-scrollable-tab-view
 
 This is probably my favorite navigation pattern on Android, I wish it
@@ -69,7 +70,9 @@ See
   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"`.
+- **`tabBarPosition`** _(String)_ Defaults to `"top"`.
+  - `"bottom"` to position the tab bar below content.
+  - `"overlayTop"` or `"overlayBottom"` for a semitransparent tab bar that overlays content. Custom tab bars must consume a style prop on their outer element to support this feature: `style={this.props.style}`.
 - **`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
 - **`onScroll`** _(Function)_ - function to call when the pages are sliding, should accept 1 argument which is an Float number representing the page position in the slide frame. 
 - **`locked`** _(Bool)_ - disables horizontal dragging to scroll between tabs, default is false.

examples/FacebookTabsExample/FacebookTabBar.js

@@ -99,7 +99,7 @@ var FacebookTabBar = React.createClass({
 
     return (
       <View>
-        <View style={styles.tabs}>
+        <View style={[styles.tabs, this.props.style, ]}>
           {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
         </View>
         <Animated.View style={[tabUnderlineStyle, {left}]} />

examples/FacebookTabsExample/FacebookTabsExample.js

@@ -9,6 +9,8 @@ var {
 } = React;
 
 var FacebookTabBar = require('./FacebookTabBar');
+var DefaultTabBar = require('react-native-scrollable-tab-view/DefaultTabBar');
+const Icon = require('react-native-vector-icons/Ionicons');
 
 var ScrollableTabView = require('react-native-scrollable-tab-view');
 var {
@@ -81,9 +83,35 @@ var ScrollableTabsExample = React.createClass({
   }
 });
 
+// Using tabBarPosition='overlayTop' or 'overlayBottom' lets the content show through a
+// semitransparent tab bar. Note that if you build a custom tab bar component, its outer container
+// must consume a 'style' prop (e.g. <View style={this.props.style}) to support this feature.
+var OverlayExample = React.createClass({
+  render() {
+    return (
+      <ScrollableTabView
+        style={styles.container}
+        renderTabBar={()=><DefaultTabBar backgroundColor='rgba(255, 255, 255, 0.5)' />}
+        tabBarPosition='overlayTop'
+        >
+        <View tabLabel='Music' style={{flex:1, backgroundColor: '#CCFFFF'}}>
+          <Icon name='android-volume-up' color='#2222CC' size={300} style={styles.icon} />
+        </View>
+        <View tabLabel='Food' style={{flex:1, backgroundColor: '#CCBBDD'}}>
+          <Icon name='ios-nutrition' color='#22AACC' size={300} style={styles.icon} />
+        </View>
+        <View tabLabel='Drink' style={{flex:1, backgroundColor: '#EEFF33'}}>
+          <Icon name='ios-pint' color='#22FFCC' size={300} style={styles.icon} />
+        </View>
+      </ScrollableTabView>
+    )
+  }
+});
+
+module.exports = FacebookTabsExample;
 //module.exports = SimpleExample;
 //module.exports = ScrollableTabsExample;
-module.exports = FacebookTabsExample;
+//module.exports = OverlayExample;
 
 var styles = StyleSheet.create({
   container: {
@@ -107,4 +135,9 @@ var styles = StyleSheet.create({
     shadowOpacity: 0.5,
     shadowRadius: 3,
   },
+  icon: {
+    width: 300,
+    height: 300,
+    alignSelf: 'center',
+  }
 });

index.js

@@ -21,7 +21,7 @@ const ScrollableTabView = React.createClass({
   },
 
   propTypes: {
-    tabBarPosition: PropTypes.oneOf(['top', 'bottom', ]),
+    tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom', ]),
     initialPage: PropTypes.number,
     page: PropTypes.number,
     onChangeTab: PropTypes.func,
@@ -172,6 +172,7 @@ const ScrollableTabView = React.createClass({
   },
 
   render() {
+    let overlayTabs = (this.props.tabBarPosition === 'overlayTop' || this.props.tabBarPosition === 'overlayBottom');
     let tabBarProps = {
       goToPage: this.goToPage,
       tabs: this._children().map((child) => child.props.tabLabel),
@@ -192,12 +193,20 @@ const ScrollableTabView = React.createClass({
     if (this.props.tabBarInactiveTextColor) {
       tabBarProps.inactiveTextColor = this.props.tabBarInactiveTextColor;
     }
+    if (overlayTabs) {
+      tabBarProps.style = {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        [this.props.tabBarPosition === 'overlayTop' ? 'top' : 'bottom']: 0
+      };
+    }
 
     return (
       <View style={[styles.container, this.props.style, ]} onLayout={this._handleLayout}>
-        {this.props.tabBarPosition === 'top' ? this.renderTabBar(tabBarProps) : null}
+        {this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)}
         {this.renderScrollableContent()}
-        {this.props.tabBarPosition === 'bottom' ? this.renderTabBar(tabBarProps) : null}
+        {(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)}
       </View>
     );
   },