fix: remove tabBarAdapative option

This commit is contained in:
Satyajit Sahoo
2021-07-26 15:12:36 +02:00
parent 54b215b9d3
commit 5f4e124032
3 changed files with 72 additions and 68 deletions

View File

@@ -54,8 +54,13 @@ function BottomTabNavigator({
tabBarLabelStyle: tabBarOptions.labelStyle,
tabBarIconStyle: tabBarOptions.iconStyle,
tabBarItemStyle: tabBarOptions.tabStyle,
tabBarLabelPosition: tabBarOptions.labelPosition,
tabBarAdaptive: tabBarOptions.adaptive,
tabBarLabelPosition:
tabBarOptions.labelPosition ??
(tabBarOptions.adaptive === false ? 'below-icon' : undefined),
tabBarStyle: [
{ display: tabBarOptions.tabBarVisible ? 'none' : 'flex' },
defaultScreenOptions.tabBarStyle,
],
});
warnOnce(

View File

@@ -86,23 +86,6 @@ export type BottomTabNavigationOptions = HeaderOptions & {
*/
title?: string;
/**
* Whether this screens should render the first time it's accessed. Defaults to `true`.
* Set it to `false` if you want to render the screen on initial render.
*/
lazy?: boolean;
/**
* Function that given returns a React Element to display as a header.
*/
header?: (props: BottomTabHeaderProps) => React.ReactNode;
/**
* Whether to show the header. Setting this to `false` hides the header.
* Defaults to `true`.
*/
headerShown?: boolean;
/**
* Title string of a tab displayed in the 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.
@@ -117,6 +100,31 @@ export type BottomTabNavigationOptions = HeaderOptions & {
position: LabelPosition;
}) => React.ReactNode);
/**
* Whether the tab label should be visible. Defaults to `true`.
*/
tabBarShowLabel?: boolean;
/**
* Whether the label is shown below the icon or beside the icon.
*
* - `below-icon`: the label is shown below the icon (typical for iPhones)
* - `beside-icon` the label is shown next to the icon (typical for iPad)
*
* By default, the position is chosen automatically based on device width.
*/
tabBarLabelPosition?: LabelPosition;
/**
* Style object for the tab label.
*/
tabBarLabelStyle?: StyleProp<TextStyle>;
/**
* Whether label font should scale to respect Text Size accessibility settings.
*/
tabBarAllowFontScaling?: boolean;
/**
* A function that given { focused: boolean, color: string } returns a React.Node to display in the tab bar.
*/
@@ -126,6 +134,11 @@ export type BottomTabNavigationOptions = HeaderOptions & {
size: number;
}) => React.ReactNode;
/**
* Style object for the tab icon.
*/
tabBarIconStyle?: StyleProp<TextStyle>;
/**
* Text to show in a badge on the tab icon.
*/
@@ -148,17 +161,9 @@ export type BottomTabNavigationOptions = HeaderOptions & {
*/
tabBarTestID?: string;
/**
* Animation config for showing and hiding the tab bar.
*/
tabBarVisibilityAnimationConfig?: {
show?: TabBarVisibilityAnimationConfig;
hide?: TabBarVisibilityAnimationConfig;
};
/**
* Function which returns a React element to render as the tab bar button.
* Renders `TouchableWithoutFeedback` by default.
* Renders `Pressable` by default.
*/
tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
@@ -178,59 +183,35 @@ export type BottomTabNavigationOptions = HeaderOptions & {
tabBarActiveBackgroundColor?: string;
/**
* background color for the inactive tabs.
* Background color for the inactive tabs.
*/
tabBarInactiveBackgroundColor?: string;
/**
* Whether label font should scale to respect Text Size accessibility settings.
*/
tabBarAllowFontScaling?: boolean;
/**
* Whether the tab label should be visible. Defaults to `true`.
*/
tabBarShowLabel?: boolean;
/**
* Style object for the tab label.
*/
tabBarLabelStyle?: StyleProp<TextStyle>;
/**
* Style object for the tab icon.
*/
tabBarIconStyle?: StyleProp<TextStyle>;
/**
* Style object for the tab item container.
*/
tabBarItemStyle?: StyleProp<ViewStyle>;
/**
* Whether the label is rendered below the icon or beside the icon.
* 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).
*/
tabBarLabelPosition?: LabelPosition;
/**
* Whether the label position should adapt to the orientation.
*/
tabBarAdaptive?: boolean;
/**
* Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
*/
tabBarHideOnKeyboard?: boolean;
/**
* Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
*/
tabBarVisibilityAnimationConfig?: {
show?: TabBarVisibilityAnimationConfig;
hide?: TabBarVisibilityAnimationConfig;
};
/**
* Style object for the tab bar container.
*/
tabBarStyle?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
/**
* Component to use as background for the tab bar.
* Function which returns a React Element to use as background for the tab bar.
* You could render an image, a gradient, blur view etc.
*
* When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well.
@@ -238,6 +219,23 @@ export type BottomTabNavigationOptions = HeaderOptions & {
*/
tabBarBackground?: () => React.ReactNode;
/**
* Whether this screens should render the first time it's accessed. Defaults to `true`.
* Set it to `false` if you want to render the screen on initial render.
*/
lazy?: boolean;
/**
* Function that given returns a React Element to display as a header.
*/
header?: (props: BottomTabHeaderProps) => React.ReactNode;
/**
* Whether to show the header. Setting this to `false` hides the header.
* Defaults to `true`.
*/
headerShown?: boolean;
/**
* Whether this screen should be unmounted when navigating away from it.
* Defaults to `false`.

View File

@@ -48,15 +48,16 @@ const shouldUseHorizontalLabels = ({
layout,
dimensions,
}: Options) => {
const { tabBarLabelPosition, tabBarAdaptive = true } =
const { tabBarLabelPosition } =
descriptors[state.routes[state.index].key].options;
if (tabBarLabelPosition) {
return tabBarLabelPosition === 'beside-icon';
}
if (!tabBarAdaptive) {
return false;
switch (tabBarLabelPosition) {
case 'beside-icon':
return true;
case 'below-icon':
return false;
}
}
if (layout.width >= 768) {