kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-03-06 22:39:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: pass label position flag to label rendering in BottomTabBar (#8557)

Browse Source 
In the process of upgrading from v4, I noticed a regression. 
In the past, the function form of `tabBarLabel` did get an `orientation: 'landscape' | 'portrait'`, this is no longer the case.
However, when using a custom Text rendering, we need to apply a margin to the text in horizontal mode.

Since the orientation/horizontal state is decided based on internal heuristics, It is a huge pain with a high bug potential when reimplementing that detection myself.
This commit is contained in:
Madd.is
2020-07-28 11:27:30 +02:00
committed by GitHub
parent 15f9b9573e
commit baea77e332
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/bottom-tabs/src/types.tsx
View File

@@ -63,12 +63,16 @@ export type BottomTabNavigationOptions = {
/**
* Title string of a tab displayed in the tab bar
* or a function that given { focused: boolean, color: string } returns a React.Node to display in tab bar.
* or a function that given { focused: boolean, color: string, position: 'below-icon' | 'beside-icon' } returns a React.Node to display in tab bar.
* When undefined, scene title is used. To hide, see tabBarOptions.showLabel in the previous section.
*/
tabBarLabel?:
| string
| ((props: { focused: boolean; color: string }) => React.ReactNode);
| ((props: {
focused: boolean;
color: string;
position: LabelPosition;
}) => React.ReactNode);
/**
* A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
@@ -183,7 +187,8 @@ export type BottomTabBarOptions = {
tabStyle?: StyleProp<ViewStyle>;
/**
* Whether the label is rendered below the icon or beside the icon.
* By default, in `vertical` orientation, label is rendered below and in `horizontal` orientation, it's rendered beside.
* By default, the position is chosen automatically based on device width.
* In `below-icon` orientation (typical for iPhones), the label is rendered below and in `beside-icon` orientation, it's rendered beside (typical for iPad).
*/
labelPosition?: LabelPosition;
/**

14
packages/bottom-tabs/src/views/BottomTabItem.tsx
View File

@@ -14,7 +14,7 @@ import { Link, Route, useTheme } from '@react-navigation/native';
import Color from 'color';
import TabBarIcon from './TabBarIcon';
import type { BottomTabBarButtonProps } from '../types';
import type { BottomTabBarButtonProps, LabelPosition } from '../types';
type Props = {
/**
@@ -30,7 +30,11 @@ type Props = {
*/
label:
| string
| ((props: { focused: boolean; color: string }) => React.ReactNode);
| ((props: {
focused: boolean;
color: string;
position: LabelPosition;
}) => React.ReactNode);
/**
* Icon to display for the tab.
*/
@@ -211,7 +215,11 @@ export default function BottomTabBarItem({
);
}
return label({ focused, color });
return label({
focused,
color,
position: horizontal ? 'beside-icon' : 'below-icon',
});
};
const renderIcon = ({ focused }: { focused: boolean }) => {