fix: remove tabBarAdapative option

react-navigation · Nov 27, 2022 · 1386b1f · 1386b1f
1 parent c023ad3
commit 1386b1f
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 67 deletions.
diff --git a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
@@ -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(

diff --git a/packages/bottom-tabs/src/types.tsx b/packages/bottom-tabs/src/types.tsx
@@ -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,66 +183,59 @@ 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.
+   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
    */
-  tabBarAdaptive?: boolean;
+  tabBarHideOnKeyboard?: boolean;
 
   /**
-   * Whether the tab bar gets hidden when the keyboard is shown. Defaults to `false`.
+   * Animation config for showing and hiding the tab bar when the keyboard is shown/hidden.
    */
-  tabBarHideOnKeyboard?: boolean;
+  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.
    * You'd also need to use `useBottomTabBarHeight()` to add a bottom padding to your content.
    */
   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`.

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -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) {