flexible tabs and container

support landscape, containers less than full screen closes ptomasroos#4 closes ptomasroos#81

Author: skv-headless

DefaultTabBar.js

@@ -2,15 +2,13 @@
 
 var React = require('react-native');
 var {
-  Dimensions,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
   Animated,
 } = React;
 
-var deviceWidth = Dimensions.get('window').width;
 
 var styles = StyleSheet.create({
   tab: {
@@ -58,17 +56,18 @@ var DefaultTabBar = React.createClass({
   },
 
   render() {
+    var containerWidth = this.props.containerWidth;
     var numberOfTabs = this.props.tabs.length;
     var tabUnderlineStyle = {
       position: 'absolute',
-      width: deviceWidth / numberOfTabs,
+      width: containerWidth / numberOfTabs,
       height: 4,
       backgroundColor: this.props.underlineColor || "navy",
       bottom: 0,
     };
 
     var left = this.props.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [0, deviceWidth / numberOfTabs]
+      inputRange: [0, 1], outputRange: [0,  containerWidth / numberOfTabs]
     });
 
     return (

examples/FacebookTabsExample/FacebookTabBar.js

@@ -6,12 +6,10 @@ var {
   Text,
   View,
   TouchableOpacity,
-  Dimensions,
   Animated,
 } = React;
 
 var { Icon, } = require('react-native-icons');
-var deviceWidth = Dimensions.get('window').width;
 
 var styles = StyleSheet.create({
   tab: {
@@ -81,17 +79,18 @@ var FacebookTabBar = React.createClass({
   },
 
   render() {
+    var containerWidth = this.props.containerWidth;
     var numberOfTabs = this.props.tabs.length;
     var tabUnderlineStyle = {
       position: 'absolute',
-      width: deviceWidth / numberOfTabs,
+      width: containerWidth / numberOfTabs,
       height: 3,
       backgroundColor: '#3b5998',
       bottom: 0,
     };
 
     var left = this.props.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [0, deviceWidth / numberOfTabs]
+      inputRange: [0, 1], outputRange: [0, containerWidth / numberOfTabs]
     });
 
     return (

examples/FacebookTabsExample/FacebookTabsExample.js

@@ -6,12 +6,10 @@ var {
   Text,
   View,
   ScrollView,
-  Dimensions,
 } = React;
 
 var ScrollableTabView = require('react-native-scrollable-tab-view');
 var FacebookTabBar = require('./FacebookTabBar');
-var deviceWidth = Dimensions.get('window').width;
 
 var FacebookTabsExample = React.createClass({
   render() {
@@ -57,7 +55,7 @@ var styles = StyleSheet.create({
     marginTop: 30,
   },
   tabView: {
-    width: deviceWidth,
+    flex: 1,
     padding: 10,
     backgroundColor: 'rgba(0,0,0,0.01)',
   },

examples/FacebookTabsExample/package.json

@@ -8,6 +8,6 @@
   "dependencies": {
     "react-native": "^0.16.0",
     "react-native-icons": "^0.7.0",
-    "react-native-scrollable-tab-view": "brentvatne/react-native-scrollable-tab-view"
+    "react-native-scrollable-tab-view": "../.."
   }
 }

index.js

@@ -10,10 +10,12 @@ var {
   StyleSheet,
   ViewPagerAndroid,
   PropTypes,
+  InteractionManager,
 } = React;
 
 var DefaultTabBar = require('./DefaultTabBar');
 var deviceWidth = Dimensions.get('window').width;
+var deviceHeight = Dimensions.get('window').height;
 
 var ScrollableTabView = React.createClass({
   statics: {
@@ -39,6 +41,10 @@ var ScrollableTabView = React.createClass({
     return {
       currentPage: this.props.initialPage,
       scrollValue: new Animated.Value(this.props.initialPage),
+      container: {
+        width: deviceWidth,
+        height: deviceHeight,
+      }
     };
   },
 
@@ -52,7 +58,7 @@ var ScrollableTabView = React.createClass({
     this.props.onChangeTab({ i: pageNumber, ref: this.props.children[pageNumber] });
 
     if(Platform.OS === 'ios') {
-      var offset = pageNumber * deviceWidth
+      var offset = pageNumber * this.state.container.width;
       this.scrollView.scrollTo(0, offset);
     } else {
       this.scrollView.setPage(pageNumber);
@@ -78,26 +84,32 @@ var ScrollableTabView = React.createClass({
           horizontal
           pagingEnabled
           style={styles.scrollableContentIOS}
-          contentOffset={{x:this.props.initialPage * deviceWidth}}
+          contentOffset={{x:this.props.initialPage * this.state.container.width}}
           ref={(scrollView) => { this.scrollView = scrollView }}
           onScroll={(e) => {
             var offsetX = e.nativeEvent.contentOffset.x;
-            this._updateScrollValue(offsetX / deviceWidth);
+            this._updateScrollValue(offsetX / this.state.container.width);
           }}
           onMomentumScrollBegin={(e) => {
             var offsetX = e.nativeEvent.contentOffset.x;
-            this._updateSelectedPage(parseInt(offsetX / deviceWidth));
+            this._updateSelectedPage(parseInt(offsetX / this.state.container.width));
           }}
           onMomentumScrollEnd={(e) => {
             var offsetX = e.nativeEvent.contentOffset.x;
-            this._updateSelectedPage(parseInt(offsetX / deviceWidth));
+            this._updateSelectedPage(parseInt(offsetX / this.state.container.width));
           }}
           scrollEventThrottle={16}
           showsHorizontalScrollIndicator={false}
           scrollEnabled={!this.props.locked}
           directionalLockEnabled
           alwaysBounceVertical={false}>
-          {this.props.children}
+          {this.props.children.map((child,idx) => {
+            return <View
+              key={child.props.tabLabel + '_' + idx}
+              style={{width: this.state.container.width}}>
+              {child}
+            </View>
+            })}
         </ScrollView>
       );
     } else {
@@ -113,10 +125,10 @@ var ScrollableTabView = React.createClass({
          ref={(scrollView) => { this.scrollView = scrollView }}>
          {this.props.children.map((child,idx) => {
            return <View
-                    key={child.props.tabLabel + '_' + idx}
-                    style={{width: deviceWidth}}>
-                    {child}
-                  </View>
+             key={child.props.tabLabel + '_' + idx}
+             style={{width: this.state.container.width}}>
+             {child}
+           </View>
          })}
         </ViewPagerAndroid>
       );
@@ -136,11 +148,19 @@ var ScrollableTabView = React.createClass({
     this.state.scrollValue.setValue(value);
   },
 
-  render() {
-    var translateX = this.state.scrollValue.interpolate({
-      inputRange: [0, 1], outputRange: [0, -deviceWidth]
-    });
+  _handleLayout(e) {
+    var {width, height} = e.nativeEvent.layout;
+    var container = this.state.container;
+
+    if (width !== container.width || height !== container.height) {
+      this.setState({container: e.nativeEvent.layout});
+      InteractionManager.runAfterInteractions(() => {
+        this.goToPage(this.state.currentPage);
+      });
+    }
+  },
 
+  render() {
     var tabBarProps = {
       goToPage: this.goToPage,
       tabs: this.props.children.map((child) => child.props.tabLabel),
@@ -150,10 +170,11 @@ var ScrollableTabView = React.createClass({
       backgroundColor : this.props.tabBarBackgroundColor,
       activeTextColor : this.props.tabBarActiveTextColor,
       inactiveTextColor : this.props.tabBarInactiveTextColor,
+      containerWidth: this.state.container.width,
     };
 
     return (
-      <View style={styles.container}>
+      <View style={styles.container} onLayout={this._handleLayout}>
         {this.props.tabBarPosition === 'top' ? this.renderTabBar(tabBarProps) : null}
         {this.renderScrollableContent()}
         {this.props.tabBarPosition === 'bottom' ? this.renderTabBar(tabBarProps) : null}