react-navigation-tabs

  • Version 2.11.2
  • Published
  • 330 kB
  • 4 dependencies
  • MIT license

Install

npm i react-navigation-tabs
yarn add react-navigation-tabs
pnpm add react-navigation-tabs

Overview

Tab Navigation components for React Navigation

Index

Variables

variable BottomTabBar

const BottomTabBar: React.ComponentType<
Pick<
BottomTabBarProps,
| 'navigation'
| 'getLabelText'
| 'getAccessibilityLabel'
| 'getTestID'
| 'renderIcon'
| 'onTabPress'
| 'onTabLongPress'
| 'screenProps'
| 'style'
| 'activeTintColor'
| 'inactiveTintColor'
| 'keyboardHidesTabBar'
| 'keyboardHidesTabBarAnimationConfig'
| 'activeBackgroundColor'
| 'inactiveBackgroundColor'
| 'allowFontScaling'
| 'showLabel'
| 'showIcon'
| 'labelStyle'
| 'tabStyle'
| 'labelPosition'
| 'adaptive'
| 'safeAreaInset'
| 'getAccessibilityRole'
| 'getAccessibilityStates'
| 'getButtonComponent'
| 'jumpTo'
| 'detachInactiveScreens'
>
>;

    Functions

    function createBottomTabNavigator

    createBottomTabNavigator: (routes: any, config?: any) => any;

      function createMaterialTopTabNavigator

      createMaterialTopTabNavigator: (routes: any, config?: any) => any;

        function createTabNavigator

        createTabNavigator: <
        Config extends {},
        Options extends NavigationCommonTabOptions,
        Props extends NavigationViewProps & CommonProps
        >(
        TabView: React.ComponentType<Props & Config & Options>
        ) => (
        routes: NavigationRouteConfigMap<Options, any>,
        config?: CreateNavigatorConfig<
        Partial<Config>,
        NavigationTabRouterConfig,
        Partial<Options>,
        any
        >
        ) => any;

          Classes

          class MaterialTopTabBar

          class TabBarTop extends React.PureComponent<MaterialTabBarProps> {}

            property defaultProps

            static defaultProps: {
            activeTintColor: string;
            inactiveTintColor: string;
            showIcon: boolean;
            showLabel: boolean;
            upperCaseLabel: boolean;
            allowFontScaling: boolean;
            };

              method render

              render: () => JSX.Element;

                Type Aliases

                type BottomTabBarProps

                type BottomTabBarProps = BottomTabBarOptions & {
                navigation: NavigationTabProp;
                onTabPress: (props: { route: NavigationRoute }) => void;
                onTabLongPress: (props: { route: NavigationRoute }) => void;
                getAccessibilityLabel: (props: { route: NavigationRoute }) => string | undefined;
                getAccessibilityRole: (props: {
                route: NavigationRoute;
                }) => AccessibilityRole | undefined;
                getAccessibilityStates: (props: {
                route: NavigationRoute;
                focused: boolean;
                }) => string[];
                getButtonComponent: (props: {
                route: NavigationRoute;
                }) => React.ComponentType<ButtonComponentProps> | undefined;
                getLabelText: (props: {
                route: NavigationRoute;
                }) =>
                | ((scene: {
                focused: boolean;
                tintColor?: string;
                orientation?: 'horizontal' | 'vertical';
                }) => string | undefined)
                | string
                | undefined;
                getTestID: (props: { route: NavigationRoute }) => string | undefined;
                renderIcon: (props: {
                route: NavigationRoute;
                focused: boolean;
                tintColor?: string;
                horizontal?: boolean;
                }) => React.ReactNode;
                dimensions: {
                width: number;
                height: number;
                };
                isLandscape: boolean;
                jumpTo: (key: string) => void;
                screenProps: unknown;
                detachInactiveScreens?: boolean;
                };
                  type NavigationBottomTabOptions = NavigationCommonTabOptions & {
                  tabBarButtonComponent?: React.ComponentType<ButtonComponentProps>;
                  };
                    type NavigationBottomTabScreenComponent<
                    Params = NavigationParams,
                    ScreenProps = unknown
                    > = React.ComponentType<NavigationTabScreenProps<Params, ScreenProps>> & {
                    navigationOptions?: NavigationScreenConfig<
                    NavigationBottomTabOptions,
                    NavigationTabProp<NavigationRoute, Params>,
                    ScreenProps
                    >;
                    };
                      type NavigationMaterialTabOptions = NavigationCommonTabOptions & {
                      tabBarButtonComponent?: React.ComponentType<any>;
                      swipeEnabled?: boolean | ((state: NavigationState) => boolean);
                      };
                        type NavigationMaterialTabScreenComponent<
                        Params = NavigationParams,
                        ScreenProps = unknown
                        > = React.ComponentType<NavigationTabScreenProps<Params, ScreenProps>> & {
                        navigationOptions?: NavigationScreenConfig<
                        NavigationMaterialTabOptions,
                        NavigationTabProp<NavigationRoute, Params>,
                        ScreenProps
                        >;
                        };
                          type NavigationTabProp<
                          State = NavigationRoute,
                          Params = NavigationParams
                          > = NavigationScreenProp<State, Params> & {
                          jumpTo(routeName: string, key?: string): void;
                          };
                            type NavigationTabScreenProps<Params = NavigationParams, ScreenProps = unknown> = {
                            theme: SupportedThemes;
                            navigation: NavigationTabProp<NavigationRoute, Params>;
                            screenProps: ScreenProps;
                            };
                              type NavigationTabState = NavigationState;

                                Package Files (7)

                                Dependencies (4)

                                Dev Dependencies (12)

                                Peer Dependencies (6)

                                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-tabs.

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