react-native-tab-view

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

TabBar: <T extends Route>({
    renderIndicator,
    gap,
    scrollEnabled,
    jumpTo,
    navigationState,
    position,
    activeColor,
    bounces,
    contentContainerStyle,
    inactiveColor,
    indicatorContainerStyle,
    indicatorStyle,
    onTabLongPress,
    onTabPress,
    pressColor,
    pressOpacity,
    direction,
    renderTabBarItem,
    style,
    tabStyle,
    layout: propLayout,
    testID,
    android_ripple,
    options,
}: Props<T>) => any;

TabBarIndicator: <T extends Route>({
    getTabWidth,
    layout,
    navigationState,
    position,
    width,
    direction,
    gap,
    style,
    children,
}: Props<T>) => any;

TabBarItem: <T extends Route>(props: Props<T>) => any;

TabView: <T extends Route>({
    onIndexChange,
    navigationState,
    renderScene,
    initialLayout,
    keyboardDismissMode,
    lazy,
    lazyPreloadDistance,
    onSwipeStart,
    onSwipeEnd,
    renderLazyPlaceholder,
    renderTabBar,
    pagerStyle,
    style,
    direction,
    swipeEnabled,
    tabBarPosition,
    animationEnabled,
    overScrollMode,
    options: sceneOptions,
    commonOptions,
}: Props<T>) => any;

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: 'auto' | `${number}%` | number;
    getTabWidth: GetTabWidth;
    direction: LocaleDirection;
    style?: StyleProp<ViewStyle>;
    gap?: number;
    children?: React.ReactNode;
};

type Props<T extends Route> = TabDescriptor<T> & {
    position: Animated.AnimatedInterpolation<number>;
    route: T;
    navigationState: NavigationState<T>;
    activeColor?: string;
    inactiveColor?: string;
    pressColor?: string;
    pressOpacity?: number;
    onLayout?: (event: LayoutChangeEvent) => void;
    onPress: () => void;
    onLongPress: () => void;
    defaultTabWidth?: number;
    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;
    options?: Record<string, TabDescriptor<T>>;
    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>;
    contentContainerStyle?: StyleProp<ViewStyle>;
    style?: StyleProp<ViewStyle>;
    direction?: LocaleDirection;
    gap?: number;
    testID?: string;
    android_ripple?: PressableAndroidRippleConfig;
};

type TabDescriptor<T extends Route> = {
    accessibilityLabel?: string;
    accessible?: boolean;
    testID?: string;
    labelText?: string;
    labelAllowFontScaling?: boolean;
    href?: string;
    label?: (props: {
        route: T;
        labelText?: string;
        focused: boolean;
        color: string;
        allowFontScaling?: boolean;
        style?: StyleProp<TextStyle>;
    }) => React.ReactNode;
    labelStyle?: StyleProp<TextStyle>;
    icon?: (props: {
        route: T;
        focused: boolean;
        color: string;
        size: number;
    }) => React.ReactNode;
    badge?: (props: { route: T }) => React.ReactElement;
    sceneStyle?: StyleProp<ViewStyle>;
};

type Props<T extends Route> = Omit<PagerProps, 'layoutDirection'> & {
    onIndexChange: (index: number) => void;
    navigationState: NavigationState<T>;
    renderLazyPlaceholder?: (props: { route: T }) => React.ReactNode;
    renderTabBar?: (
        props: SceneRendererProps & {
            navigationState: NavigationState<T>;
            options: Record<string, TabDescriptor<T>> | undefined;
        }
    ) => React.ReactNode;
    tabBarPosition?: 'top' | 'bottom';
    initialLayout?: Partial<Layout>;
    lazy?: ((props: { route: T }) => boolean) | boolean;
    lazyPreloadDistance?: number;
    direction?: LocaleDirection;
    pagerStyle?: StyleProp<ViewStyle>;
    style?: StyleProp<ViewStyle>;
    renderScene: (
        props: SceneRendererProps & {
            route: T;
        }
    ) => React.ReactNode;
    options?: Record<string, TabDescriptor<T>>;
    commonOptions?: TabDescriptor<T>;
};