From b3c6b5c744187c08e5cf3f3e40eef4209335bcb8 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Thu, 5 Jan 2017 02:23:21 +0530
Subject: [PATCH] fix: allow setting flex on tab without fixed width

---
 example/src/ScrollViewsExample.js |  2 +-
 src/TabBar.js                     | 26 ++++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/example/src/ScrollViewsExample.js b/example/src/ScrollViewsExample.js
index 20d75a0a..887b90a3 100644
--- 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
index 043e3a85..e23917f0 100644
--- 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>