fix: allow setting flex on tab without fixed width

satya164 · Jan 4, 2017 · b3c6b5c · b3c6b5c
1 parent 017e75f
commit b3c6b5c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/example/src/ScrollViewsExample.js b/example/src/ScrollViewsExample.js
@@ -1,7 +1,7 @@
 /* @flow */
 
 import React, { Component } from 'react';
-import { Animated, View, Dimensions, StyleSheet } from 'react-native';
+import { Animated, View, StyleSheet } from 'react-native';
 import { TabViewAnimated, TabBarTop } from 'react-native-tab-view';
 import ListViewExample from './ListViewExample';
 

diff --git a/src/TabBar.js b/src/TabBar.js
@@ -122,7 +122,11 @@ export default class TabBar extends PureComponent<DefaultProps, Props, State> {
   };
 
   componentWillMount() {
-    if (this.props.layout.width || this.props.tabWidth) {
+    if (this.props.scrollEnabled === true) {
+      if (this.props.layout.width || this.props.tabWidth) {
+        this.state.visibility.setValue(1);
+      }
+    } else {
       this.state.visibility.setValue(1);
     }
   }
@@ -365,6 +369,8 @@ export default class TabBar extends PureComponent<DefaultProps, Props, State> {
 
               const tabStyle = {};
 
+              tabStyle.opacity = opacity;
+
               if (icon) {
                 if (label) {
                   tabStyle.paddingTop = 8;
@@ -373,6 +379,21 @@ export default class TabBar extends PureComponent<DefaultProps, Props, State> {
                 }
               }
 
+              const isWidthSet = typeof this.props.tabWidth === 'number' || scrollEnabled === true;
+
+              if (isWidthSet) {
+                tabStyle.width = tabWidth;
+              }
+
+              const tabContainerStyle = {};
+              const passedTabStyle = StyleSheet.flatten(this.props.tabStyle);
+
+              if (passedTabStyle && typeof passedTabStyle.flex === 'number') {
+                tabContainerStyle.flex = passedTabStyle.flex;
+              } else if (!isWidthSet) {
+                tabContainerStyle.flex = 1;
+              }
+
               return (
                 <TouchableItem
                   borderless
@@ -389,9 +410,10 @@ export default class TabBar extends PureComponent<DefaultProps, Props, State> {
                       onTabPress(routes[i]);
                     }
                   }}
+                  style={tabContainerStyle}
                 >
                   <View style={styles.container}>
-                    <Animated.View style={[ styles.tabitem, { opacity }, tabWidth ? { width: tabWidth } : null, tabStyle, this.props.tabStyle ]}>
+                    <Animated.View style={[ styles.tabitem, tabStyle, passedTabStyle, styles.container ]}>
                       {icon}
                       {label}
                     </Animated.View>