react-native-tab-view

SceneMap: <T extends unknown>(scenes: {
    [key: string]: React.ComponentType<T>;
}) => ({ route, jumpTo, position }: SceneProps) => JSX.Element;

TabBar: <T extends Route>({
    getLabelText,
    getAccessible,
    getAccessibilityLabel,
    getTestID,
    renderIndicator,
    gap,
    scrollEnabled,
    jumpTo,
    navigationState,
    position,
    activeColor,
    bounces,
    contentContainerStyle,
    inactiveColor,
    indicatorContainerStyle,
    indicatorStyle,
    labelStyle,
    onTabLongPress,
    onTabPress,
    pressColor,
    pressOpacity,
    renderBadge,
    renderIcon,
    renderLabel,
    renderTabBarItem,
    style,
    tabStyle,
    testID,
    android_ripple,
}: Props<T>) => JSX.Element;

TabBarIndicator: <T extends Route>({
    getTabWidth,
    layout,
    navigationState,
    position,
    width,
    gap,
    style,
}: Props<T>) => JSX.Element;

TabBarItem: <T extends Route>(props: Props<T>) => JSX.Element;

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

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

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

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

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

type Props<T extends Route> = {
    position: Animated.AnimatedInterpolation<number>;
    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;
    defaultTabWidth?: number;
    labelStyle?: StyleProp<TextStyle>;
    style: StyleProp<ViewStyle>;
    android_ripple?: PressableAndroidRippleConfig;
};

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>;
    gap?: number;
    testID?: string;
    android_ripple?: PressableAndroidRippleConfig;
};

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>;
    pagerStyle?: StyleProp<ViewStyle>;
    style?: StyleProp<ViewStyle>;
};