diff --git a/src/views/BottomTabBar.js b/src/views/BottomTabBar.js index 2179ce7ff..daa808dff 100644 --- a/src/views/BottomTabBar.js +++ b/src/views/BottomTabBar.js @@ -14,6 +14,12 @@ import { SafeAreaView } from '@react-navigation/native'; 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 = { keyboardHidesTabBar: boolean, activeTintColor?: string, @@ -25,6 +31,7 @@ export type TabBarOptions = { showIcon: boolean, labelStyle: any, tabStyle: any, + labelPosition?: LabelPosition, adaptive?: boolean, style: any, }; @@ -176,6 +183,7 @@ class TabBarBottom extends React.Component { } const label = this.props.getLabelText({ route }); + const horizontal = this._shouldUseHorizontalLabels(); const tintColor = focused ? activeTintColor : inactiveTintColor; if (typeof label === 'string') { @@ -185,9 +193,7 @@ class TabBarBottom extends React.Component { style={[ styles.label, { color: tintColor }, - showIcon && this._shouldUseHorizontalLabels() - ? styles.labelBeside - : styles.labelBeneath, + showIcon && horizontal ? styles.labelBeside : styles.labelBeneath, labelStyle, ]} allowFontScaling={allowFontScaling} @@ -198,7 +204,12 @@ class TabBarBottom extends React.Component { } if (typeof label === 'function') { - return label({ route, focused, tintColor }); + return label({ + route, + focused, + tintColor, + orientation: horizontal ? 'horizontal' : 'vertical', + }); } return label; @@ -243,7 +254,28 @@ class TabBarBottom extends React.Component { _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;