From 8034f4bed4c4179a41c4ebffaaa163eafd3b2fc0 Mon Sep 17 00:00:00 2001
From: Benoit Dion <benoitdion@gmail.com>
Date: Mon, 25 Mar 2019 12:50:42 -0400
Subject: [PATCH] feat: add ability to customize whether label orientation

Also feed orientation to the label render function
---
 src/views/BottomTabBar.js | 42 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/views/BottomTabBar.js b/src/views/BottomTabBar.js
index a64e31393..7fee3ca3a 100644
--- a/src/views/BottomTabBar.js
+++ b/src/views/BottomTabBar.js
@@ -13,6 +13,12 @@ import Animated from 'react-native-reanimated';
 import CrossFadeIcon from './CrossFadeIcon';
 import withDimensions from '../utils/withDimensions';
 
+type Orientation = 'horizontal' | 'vertical';
+type Position = 'beside-icon' | 'below-icon';
+type LabelPosition =
+  | Position
+  | ((options: { deviceOrientation: Orientation }) => Position);
+
 export type TabBarOptions = {
   activeTintColor?: string,
   inactiveTintColor?: string,
@@ -23,6 +29,7 @@ export type TabBarOptions = {
   showIcon: boolean,
   labelStyle: any,
   tabStyle: any,
+  labelPosition?: LabelPosition,
   adaptive?: boolean,
   style: any,
 };
@@ -101,6 +108,7 @@ class TabBarBottom extends React.Component<Props> {
     }
 
     const label = this.props.getLabelText({ route });
+    const horizontal = this._shouldUseHorizontalLabels();
     const tintColor = focused ? activeTintColor : inactiveTintColor;
 
     if (typeof label === 'string') {
@@ -110,9 +118,7 @@ class TabBarBottom extends React.Component<Props> {
           style={[
             styles.label,
             { color: tintColor },
-            showIcon && this._shouldUseHorizontalLabels()
-              ? styles.labelBeside
-              : styles.labelBeneath,
+            showIcon && horizontal ? styles.labelBeside : styles.labelBeneath,
             labelStyle,
           ]}
           allowFontScaling={allowFontScaling}
@@ -123,7 +129,12 @@ class TabBarBottom extends React.Component<Props> {
     }
 
     if (typeof label === 'function') {
-      return label({ route, focused, tintColor });
+      return label({
+        route,
+        focused,
+        tintColor,
+        orientation: horizontal ? 'horizontal' : 'vertical',
+      });
     }
 
     return label;
@@ -168,7 +179,28 @@ class TabBarBottom extends React.Component<Props> {
 
   _shouldUseHorizontalLabels = () => {
     const { routes } = this.props.navigation.state;
-    const { isLandscape, dimensions, adaptive, tabStyle } = this.props;
+    const {
+      isLandscape,
+      dimensions,
+      adaptive,
+      tabStyle,
+      labelPosition,
+    } = this.props;
+
+    if (labelPosition) {
+      let position;
+      if (typeof labelPosition === 'string') {
+        position = labelPosition;
+      } else {
+        position = labelPosition({
+          deviceOrientation: isLandscape ? 'horizontal' : 'vertical',
+        });
+      }
+
+      if (position) {
+        return position === 'beside-icon';
+      }
+    }
 
     if (!adaptive) {
       return false;