add collapsable bar functionality

* add collpasableBar api props
* replace the Container View with a ScrollView to allow collapsable functionality
* user collapasable functionality just if it's passed in props
* add collapsable to Examples

Author: tibbus

examples/FacebookTabsExample/CollapsableExample.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+export default React.createClass({
+  render() {
+    const collapsableComponent = (
+      <View>
+        <Icon name='logo-apple' color='black' size={100} style={styles.topIcon} />
+        <Icon name='logo-android' color='#A4C639' size={100} style={styles.topIcon} />
+      </View>
+    );
+
+    return <ScrollableTabView collapsableBar={collapsableComponent}
+      tabBarBackgroundColor="white"
+      renderTabBar={()=><DefaultTabBar />}
+    >
+      <View tabLabel='iOS'>
+        <Icon name='logo-apple' color='black' size={300} style={styles.icon} />
+        <Icon name='ios-phone-portrait' color='black' size={300} style={styles.icon} />
+        <Icon name='logo-apple' color='#DBDDDE' size={300} style={styles.icon} />
+        <Icon name='ios-phone-portrait' color='#DBDDDE' size={300} style={styles.icon} />
+      </View>
+      <View tabLabel='Android'>
+        <Icon name='logo-android' color='#A4C639' size={300} style={styles.icon} />
+        <Icon name='logo-android' color='black' size={300} style={styles.icon} />
+        <Icon name='logo-android' color='#A4C639' size={300} style={styles.icon} />
+      </View>
+    </ScrollableTabView>;
+  },
+});
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 300,
+    height: 300,
+    alignSelf: 'center',
+  },
+  topIcon: {
+    width: 100,
+    height: 100,
+    alignSelf: 'center',
+  },
+});

examples/FacebookTabsExample/index.js

@@ -12,6 +12,7 @@ import ScrollableTabsExample from './ScrollableTabsExample';
 import OverlayExample from './OverlayExample';
 import FacebookExample from './FacebookExample';
 import DynamicExample from './DynamicExample';
+import CollapsableExample from './CollapsableExample';
 
 const HomeScreen = React.createClass({
   navigationOptions: {
@@ -56,6 +57,13 @@ const HomeScreen = React.createClass({
       >
         <Text>Dynamic tabs example</Text>
       </TouchableOpacity>
+
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => navigate('Collapsable')}
+      >
+        <Text>Collapsable content example</Text>
+      </TouchableOpacity>
     </View>;
   },
 });
@@ -67,6 +75,7 @@ const App = new StackNavigator({
   Overlay: { screen: OverlayExample, },
   Facebook: { screen: FacebookExample, },
   Dynamic: { screen: DynamicExample, },
+  Collapsable: { screen: CollapsableExample, },
 });
 
 export default App;

index.js

@@ -39,6 +39,7 @@ const ScrollableTabView = React.createClass({
     scrollWithoutAnimation: PropTypes.bool,
     locked: PropTypes.bool,
     prerenderingSiblingsNumber: PropTypes.number,
+    collapsableBar: PropTypes.node,
   },
 
   getDefaultProps() {
@@ -179,12 +180,20 @@ const ScrollableTabView = React.createClass({
   _composeScenes() {
     return this._children().map((child, idx) => {
       let key = this._makeSceneKey(child, idx);
+      let element;
+
+      if (!!this.props.collapsableBar) {
+        element = this.state.currentPage === idx ? child : null;
+      } else {
+        element = this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel} />;
+      }
+
       return <SceneComponent
         key={child.key}
-        shouldUpdated={this._shouldRenderSceneKey(idx, this.state.currentPage)}
-        style={{width: this.state.containerWidth, }}
+        shouldUpdated={!!this.props.collapsableBar || this._shouldRenderSceneKey(idx, this.state.currentPage)}
+        style={{ width: this.state.containerWidth, }}
       >
-        {this._keyExists(this.state.sceneKeys, key) ? child : <View tabLabel={child.props.tabLabel}/>}
+        {element}
       </SceneComponent>;
     });
   },
@@ -216,6 +225,10 @@ const ScrollableTabView = React.createClass({
       ref: this._children()[currentPage],
       from: prevPage,
     });
+
+    if (this.contentScrollDistance >= this.collapsableBarHeight) {
+      this.contentView.scrollTo({ x: 0, y: this.collapsableBarHeight, animated: false, });
+    }
   },
 
   _handleLayout(e) {
@@ -233,6 +246,16 @@ const ScrollableTabView = React.createClass({
     return React.Children.map(children, (child) => child);
   },
 
+  renderCollapsableBar() {
+    if (!this.props.collapsableBar) {
+      return null;
+    }
+
+    return React.cloneElement(this.props.collapsableBar, {
+      onLayout: event => {this.collapsableBarHeight = event.nativeEvent.layout.height;},
+    });
+  },
+
   render() {
     let overlayTabs = (this.props.tabBarPosition === 'overlayTop' || this.props.tabBarPosition === 'overlayBottom');
     let tabBarProps = {
@@ -267,12 +290,18 @@ const ScrollableTabView = React.createClass({
         [this.props.tabBarPosition === 'overlayTop' ? 'top' : 'bottom']: 0,
       };
     }
-
-    return <View style={[styles.container, this.props.style, ]} onLayout={this._handleLayout}>
+    const ContainerView = this.props.collapsableBar ? ScrollView : View;
+
+    return <ContainerView style={[styles.container, this.props.style, ]}
+      onLayout={this._handleLayout}
+      ref={contentView => {this.contentView = contentView;}}
+      onMomentumScrollEnd={event => {this.contentScrollDistance = event.nativeEvent.contentOffset.y;}}
+      stickyHeaderIndices={this.props.collapsableBar ? [1, ] : []}>
+      {this.renderCollapsableBar()}
       {this.props.tabBarPosition === 'top' && this.renderTabBar(tabBarProps)}
       {this.renderScrollableContent()}
       {(this.props.tabBarPosition === 'bottom' || overlayTabs) && this.renderTabBar(tabBarProps)}
-    </View>;
+    </ContainerView>;
   },
 });