@react-navigation/bottom-tabs

  • Version 6.4.3
  • Published
  • 299 kB
  • 3 dependencies
  • MIT license

Install

npm i @react-navigation/bottom-tabs
yarn add @react-navigation/bottom-tabs
pnpm add @react-navigation/bottom-tabs

Overview

Bottom tab navigator following iOS design guidelines

Index

Variables

variable BottomTabBarHeightCallbackContext

const BottomTabBarHeightCallbackContext: React.Context<(height: number) => void>;

    variable BottomTabBarHeightContext

    const BottomTabBarHeightContext: React.Context<number>;

      Functions

      function BottomTabBar

      BottomTabBar: ({
      state,
      navigation,
      descriptors,
      insets,
      style,
      }: Props) => JSX.Element;

        function BottomTabView

        BottomTabView: (props: Props) => JSX.Element;

          function createBottomTabNavigator

          createBottomTabNavigator: <ParamList extends ParamListBase>() => any;

            function useBottomTabBarHeight

            useBottomTabBarHeight: () => number;

              Type Aliases

              type BottomTabBarButtonProps

              type BottomTabBarButtonProps = Omit<TouchableWithoutFeedbackProps, 'onPress'> & {
              to?: string;
              children: React.ReactNode;
              onPress?: (
              e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
              ) => void;
              };

                type BottomTabBarProps

                type BottomTabBarProps = {
                state: TabNavigationState<ParamListBase>;
                descriptors: BottomTabDescriptorMap;
                navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
                insets: EdgeInsets;
                };

                  type BottomTabHeaderProps

                  type BottomTabHeaderProps = {
                  /**
                  * Layout of the screen.
                  */
                  layout: Layout;
                  /**
                  * Options for the current screen.
                  */
                  options: BottomTabNavigationOptions;
                  /**
                  * Route object for the current screen.
                  */
                  route: RouteProp<ParamListBase>;
                  /**
                  * Navigation prop for the header.
                  */
                  navigation: BottomTabNavigationProp<ParamListBase>;
                  };

                    type BottomTabNavigationEventMap

                    type BottomTabNavigationEventMap = {
                    /**
                    * Event which fires on tapping on the tab in the tab bar.
                    */
                    tabPress: {
                    data: undefined;
                    canPreventDefault: true;
                    };
                    /**
                    * Event which fires on long press on the tab in the tab bar.
                    */
                    tabLongPress: {
                    data: undefined;
                    };
                    };

                      type BottomTabNavigationOptions

                      type BottomTabNavigationOptions = HeaderOptions & {
                      /**
                      * Title text for the screen.
                      */
                      title?: string;
                      /**
                      * 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.
                      *
                      * When undefined, scene title is used. Use `tabBarShowLabel` to hide the label.
                      */
                      tabBarLabel?:
                      | string
                      | ((props: {
                      focused: boolean;
                      color: string;
                      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.
                      */
                      tabBarIcon?: (props: {
                      focused: boolean;
                      color: string;
                      size: number;
                      }) => React.ReactNode;
                      /**
                      * Style object for the tab icon.
                      */
                      tabBarIconStyle?: StyleProp<TextStyle>;
                      /**
                      * Text to show in a badge on the tab icon.
                      */
                      tabBarBadge?: number | string;
                      /**
                      * Custom style for the tab bar badge.
                      * You can specify a background color or text color here.
                      */
                      tabBarBadgeStyle?: StyleProp<TextStyle>;
                      /**
                      * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
                      * It's recommended to set this if you don't have a label for the tab.
                      */
                      tabBarAccessibilityLabel?: string;
                      /**
                      * ID to locate this tab button in tests.
                      */
                      tabBarTestID?: string;
                      /**
                      * Function which returns a React element to render as the tab bar button.
                      * Renders `Pressable` by default.
                      */
                      tabBarButton?: (props: BottomTabBarButtonProps) => React.ReactNode;
                      /**
                      * Color for the icon and label in the active tab.
                      */
                      tabBarActiveTintColor?: string;
                      /**
                      * Color for the icon and label in the inactive tabs.
                      */
                      tabBarInactiveTintColor?: string;
                      /**
                      * Background color for the active tab.
                      */
                      tabBarActiveBackgroundColor?: string;
                      /**
                      * Background color for the inactive tabs.
                      */
                      tabBarInactiveBackgroundColor?: string;
                      /**
                      * Style object for the tab item container.
                      */
                      tabBarItemStyle?: StyleProp<ViewStyle>;
                      /**
                      * 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>>;
                      /**
                      * 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`.
                      */
                      unmountOnBlur?: boolean;
                      /**
                      * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
                      * Defaults to `true` when `enableFreeze()` is run at the top of the application.
                      * Requires `react-native-screens` version >=3.16.0.
                      *
                      * Only supported on iOS and Android.
                      */
                      freezeOnBlur?: boolean;
                      };

                        type BottomTabNavigationProp

                        type BottomTabNavigationProp<
                        ParamList extends ParamListBase,
                        RouteName extends keyof ParamList = keyof ParamList,
                        NavigatorID extends string | undefined = undefined
                        > = NavigationProp<
                        ParamList,
                        RouteName,
                        NavigatorID,
                        TabNavigationState<ParamList>,
                        BottomTabNavigationOptions,
                        BottomTabNavigationEventMap
                        > &
                        TabActionHelpers<ParamList>;

                          type BottomTabScreenProps

                          type BottomTabScreenProps<
                          ParamList extends ParamListBase,
                          RouteName extends keyof ParamList = keyof ParamList,
                          NavigatorID extends string | undefined = undefined
                          > = {
                          navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
                          route: RouteProp<ParamList, RouteName>;
                          };

                            Package Files (8)

                            Dependencies (3)

                            Dev Dependencies (12)

                            Peer Dependencies (5)

                            Badge

                            To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                            You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@react-navigation/bottom-tabs.

                            • Markdown
                              [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@react-navigation/bottom-tabs)
                            • HTML
                              <a href="https://www.jsdocs.io/package/@react-navigation/bottom-tabs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>