react-native-tab-view

  • Version 3.1.1
  • Published
  • 376 kB
  • No dependencies
  • MIT license

Install

npm i react-native-tab-view
yarn add react-native-tab-view
pnpm add react-native-tab-view

Overview

Tab view component for React Native

Index

Functions

function SceneMap

SceneMap: <T extends unknown>(scenes: {
[key: string]: any;
}) => ({ route, jumpTo, position }: SceneRendererProps & { route: any }) => any;

    function TabView

    TabView: <T extends Route>({
    onIndexChange,
    navigationState,
    renderScene,
    initialLayout,
    keyboardDismissMode,
    lazy,
    lazyPreloadDistance,
    onSwipeStart,
    onSwipeEnd,
    renderLazyPlaceholder,
    renderTabBar,
    sceneContainerStyle,
    style,
    swipeEnabled,
    tabBarPosition,
    }: Props<T>) => any;

      Classes

      class TabBar

      class TabBar<T extends Route> extends React.Component<Props<T>, State> {}

        property defaultProps

        static defaultProps: {
        getLabelText: ({ route }: Scene<Route>) => string | undefined;
        getAccessible: ({ route }: Scene<Route>) => boolean;
        getAccessibilityLabel: ({ route }: Scene<Route>) => string | undefined;
        getTestID: ({ route }: Scene<Route>) => string | undefined;
        renderIndicator: (props: IndicatorProps<Route>) => any;
        };

          property state

          state: State;

            method componentDidUpdate

            componentDidUpdate: (prevProps: Props<T>, prevState: State) => void;

              method render

              render: () => any;

                class TabBarIndicator

                class TabBarIndicator<T extends Route> extends React.Component<Props<T>> {}

                  method componentDidMount

                  componentDidMount: () => void;

                    method componentDidUpdate

                    componentDidUpdate: () => void;

                      method render

                      render: () => any;

                        class TabBarItem

                        class TabBarItem<T extends Route> extends React.Component<Props<T>> {}

                          method render

                          render: () => any;

                            Type Aliases

                            type NavigationState<T extends Route> = {
                            index: number;
                            routes: T[];
                            };

                              type Route

                              type Route = {
                              key: string;
                              icon?: string;
                              title?: string;
                              accessible?: boolean;
                              accessibilityLabel?: string;
                              testID?: string;
                              };

                                type SceneRendererProps

                                type SceneRendererProps = {
                                layout: Layout;
                                position: Animated.AnimatedInterpolation;
                                jumpTo: (key: string) => void;
                                };

                                  type TabBarIndicatorProps

                                  type Props<T extends Route> = SceneRendererProps & {
                                  navigationState: NavigationState<T>;
                                  width: string | number;
                                  style?: StyleProp<ViewStyle>;
                                  getTabWidth: GetTabWidth;
                                  };

                                    type TabBarItemProps

                                    type Props<T extends Route> = {
                                    position: Animated.AnimatedInterpolation;
                                    route: T;
                                    navigationState: NavigationState<T>;
                                    activeColor?: string;
                                    inactiveColor?: string;
                                    pressColor?: string;
                                    pressOpacity?: number;
                                    getLabelText: (scene: Scene<T>) => string | undefined;
                                    getAccessible: (scene: Scene<T>) => boolean | undefined;
                                    getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
                                    getTestID: (scene: Scene<T>) => string | undefined;
                                    renderLabel?: (scene: {
                                    route: T;
                                    focused: boolean;
                                    color: string;
                                    }) => React.ReactNode;
                                    renderIcon?: (scene: {
                                    route: T;
                                    focused: boolean;
                                    color: string;
                                    }) => React.ReactNode;
                                    renderBadge?: (scene: Scene<T>) => React.ReactNode;
                                    onLayout?: (event: LayoutChangeEvent) => void;
                                    onPress: () => void;
                                    onLongPress: () => void;
                                    labelStyle?: StyleProp<TextStyle>;
                                    style: StyleProp<ViewStyle>;
                                    };

                                      type TabBarProps

                                      type Props<T extends Route> = SceneRendererProps & {
                                      navigationState: NavigationState<T>;
                                      scrollEnabled?: boolean;
                                      bounces?: boolean;
                                      activeColor?: string;
                                      inactiveColor?: string;
                                      pressColor?: string;
                                      pressOpacity?: number;
                                      getLabelText: (scene: Scene<T>) => string | undefined;
                                      getAccessible: (scene: Scene<T>) => boolean | undefined;
                                      getAccessibilityLabel: (scene: Scene<T>) => string | undefined;
                                      getTestID: (scene: Scene<T>) => string | undefined;
                                      renderLabel?: (
                                      scene: Scene<T> & {
                                      focused: boolean;
                                      color: string;
                                      }
                                      ) => React.ReactNode;
                                      renderIcon?: (
                                      scene: Scene<T> & {
                                      focused: boolean;
                                      color: string;
                                      }
                                      ) => React.ReactNode;
                                      renderBadge?: (scene: Scene<T>) => React.ReactNode;
                                      renderIndicator: (props: IndicatorProps<T>) => React.ReactNode;
                                      renderTabBarItem?: (
                                      props: TabBarItemProps<T> & {
                                      key: string;
                                      }
                                      ) => React.ReactElement;
                                      onTabPress?: (scene: Scene<T> & Event) => void;
                                      onTabLongPress?: (scene: Scene<T>) => void;
                                      tabStyle?: StyleProp<ViewStyle>;
                                      indicatorStyle?: StyleProp<ViewStyle>;
                                      indicatorContainerStyle?: StyleProp<ViewStyle>;
                                      labelStyle?: StyleProp<TextStyle>;
                                      contentContainerStyle?: StyleProp<ViewStyle>;
                                      style?: StyleProp<ViewStyle>;
                                      };

                                        type TabViewProps

                                        type Props<T extends Route> = PagerProps & {
                                        onIndexChange: (index: number) => void;
                                        navigationState: NavigationState<T>;
                                        renderScene: (
                                        props: SceneRendererProps & {
                                        route: T;
                                        }
                                        ) => React.ReactNode;
                                        renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
                                        renderTabBar?: (
                                        props: SceneRendererProps & {
                                        navigationState: NavigationState<T>;
                                        }
                                        ) => React.ReactNode;
                                        tabBarPosition?: 'top' | 'bottom';
                                        initialLayout?: Partial<Layout>;
                                        lazy?: ((props: { route: T }) => boolean) | boolean;
                                        lazyPreloadDistance?: number;
                                        sceneContainerStyle?: StyleProp<ViewStyle>;
                                        style?: StyleProp<ViewStyle>;
                                        };

                                          Package Files (7)

                                          Dependencies (0)

                                          No dependencies.

                                          Dev Dependencies (20)

                                          Peer Dependencies (3)

                                          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-native-tab-view.

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