@react-navigation/bottom-tabs

  • Version 7.2.0
  • Published
  • 348 kB
  • 2 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) => any;

        function BottomTabView

        BottomTabView: (props: Props) => any;

          function createBottomTabNavigator

          createBottomTabNavigator: () => any;

            function useBottomTabBarHeight

            useBottomTabBarHeight: () => number;

              Type Aliases

              type BottomTabBarButtonProps

              type BottomTabBarButtonProps = Omit<
              React.ComponentProps<typeof Pressable>,
              'style'
              > & {
              href?: string;
              children: React.ReactNode;
              style?: StyleProp<ViewStyle>;
              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;
                    };
                    /**
                    * Event which fires when a transition animation starts.
                    */
                    transitionStart: {
                    data: undefined;
                    };
                    /**
                    * Event which fires when a transition animation ends.
                    */
                    transitionEnd: {
                    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', children: string } 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;
                      children: string;
                      }) => 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.
                      */
                      tabBarButtonTestID?: string;
                      /**
                      * Function which returns a React element to render as the tab bar button.
                      * Renders `PlatformPressable` 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;
                      };
                      /**
                      * Variant of the tab bar. Defaults to `uikit`.
                      */
                      tabBarVariant?: Variant;
                      /**
                      * 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;
                      /**
                      * Position of the tab bar on the screen. Defaults to `bottom`.
                      */
                      tabBarPosition?: 'bottom' | 'left' | 'right' | 'top';
                      /**
                      * 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 any nested stack should be popped to top when navigating away from the tab.
                      * Defaults to `false`.
                      */
                      popToTopOnBlur?: 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;
                      /**
                      * Style object for the component wrapping the screen content.
                      */
                      sceneStyle?: StyleProp<ViewStyle>;
                      /**
                      * How the screen should animate when switching tabs.
                      *
                      * Supported values:
                      * - 'none': don't animate the screen (default)
                      * - 'fade': cross-fade the screens.
                      * - 'shift': shift the screens slightly shift to left/right.
                      */
                      animation?: TabAnimationName;
                      /**
                      * Function which specifies interpolated styles for bottom-tab scenes.
                      */
                      sceneStyleInterpolator?: BottomTabSceneStyleInterpolator;
                      /**
                      * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
                      */
                      transitionSpec?: TransitionSpec;
                      };

                        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 BottomTabNavigatorProps

                          type BottomTabNavigatorProps = DefaultNavigatorOptions<
                          ParamListBase,
                          string | undefined,
                          TabNavigationState<ParamListBase>,
                          BottomTabNavigationOptions,
                          BottomTabNavigationEventMap,
                          BottomTabNavigationProp<ParamListBase>
                          > &
                          TabRouterOptions &
                          BottomTabNavigationConfig;

                            type BottomTabOptionsArgs

                            type BottomTabOptionsArgs<
                            ParamList extends ParamListBase,
                            RouteName extends keyof ParamList = keyof ParamList,
                            NavigatorID extends string | undefined = undefined
                            > = BottomTabScreenProps<ParamList, RouteName, NavigatorID> & {
                            theme: Theme;
                            };

                              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>;
                              };

                                Namespaces

                                namespace SceneStyleInterpolators

                                module 'lib/typescript/commonjs/src/TransitionConfigs/SceneStyleInterpolators.d.ts' {}
                                • Simple cross fade animation

                                function forFade

                                forFade: ({
                                current,
                                }: BottomTabSceneInterpolationProps) => BottomTabSceneInterpolatedStyle;
                                • Simple cross fade animation

                                function forShift

                                forShift: ({
                                current,
                                }: BottomTabSceneInterpolationProps) => BottomTabSceneInterpolatedStyle;
                                • Animation where the screens slightly shift to left/right

                                namespace TransitionPresets

                                module 'lib/typescript/commonjs/src/TransitionConfigs/TransitionPresets.d.ts' {}

                                  variable FadeTransition

                                  const FadeTransition: BottomTabTransitionPreset;

                                    variable ShiftTransition

                                    const ShiftTransition: BottomTabTransitionPreset;

                                      namespace TransitionSpecs

                                      module 'lib/typescript/commonjs/src/TransitionConfigs/TransitionSpecs.d.ts' {}

                                        variable FadeSpec

                                        const FadeSpec: TransitionSpec;

                                          variable ShiftSpec

                                          const ShiftSpec: TransitionSpec;

                                            Package Files (11)

                                            Dependencies (2)

                                            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>