Another fix for frustrating tab bar icon layout issue

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: {

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%',
   },
 });