From 175387b22fe9d4e839fffcb27d557a74e7b49c01 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Thu, 15 Mar 2018 10:19:20 -0700
Subject: [PATCH] Another fix for frustrating tab bar icon layout issue

---
 src/views/TabView/TabBarBottom.js | 12 ++++++++----
 src/views/TabView/TabBarIcon.js   |  8 ++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/TabView/TabBarBottom.js b/src/views/TabView/TabBarBottom.js
index d5ef6338..e90c81be 100644
--- a/src/views/TabView/TabBarBottom.js
+++ b/src/views/TabView/TabBarBottom.js
@@ -112,8 +112,9 @@ class TabBarBottom extends React.PureComponent {
         renderIcon={renderIcon}
         scene={scene}
         style={[
-          horizontal && styles.horizontalIcon,
-          showLabel !== false && !horizontal && styles.icon,
+          styles.iconWithExplicitHeight,
+          showLabel === false && !horizontal && styles.iconWithoutLabel,
+          showLabel !== false && !horizontal && styles.iconWithLabel,
         ]}
       />
     );
@@ -320,10 +321,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  icon: {
+  iconWithoutLabel: {
+    flex: 1,
+  },
+  iconWithLabel: {
     flexGrow: 1,
   },
-  horizontalIcon: {
+  iconWithExplicitHeight: {
     height: Platform.isPad ? DEFAULT_HEIGHT : COMPACT_HEIGHT,
   },
   label: {
diff --git a/src/views/TabView/TabBarIcon.js b/src/views/TabView/TabBarIcon.js
index 3461c3a6..4d025e90 100644
--- a/src/views/TabView/TabBarIcon.js
+++ b/src/views/TabView/TabBarIcon.js
@@ -54,11 +54,11 @@ const styles = StyleSheet.create({
     // We render the icon twice at the same position on top of each other:
     // active and inactive one, so we can fade between them:
     // Cover the whole iconContainer:
-    alignItems: 'center',
-    alignSelf: 'center',
-    height: '100%',
-    justifyContent: 'center',
     position: 'absolute',
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
     width: '100%',
   },
 });