@react-navigation/bottom-tabs

const BottomTabBarHeightCallbackContext: React.Context<(height: number) => void>;

const BottomTabBarHeightContext: React.Context<number>;

BottomTabBar: ({
    state,
    navigation,
    descriptors,
    insets,
    style,
}: Props) => JSX.Element;

BottomTabView: (props: Props) => JSX.Element;

createBottomTabNavigator: <ParamList extends ParamListBase>() => any;

useBottomTabBarHeight: () => number;

type BottomTabBarButtonProps = Omit<TouchableWithoutFeedbackProps, 'onPress'> & {
    to?: string;
    children: React.ReactNode;
    onPress?: (
        e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
    ) => void;
};

type BottomTabBarProps = {
    state: TabNavigationState<ParamListBase>;
    descriptors: BottomTabDescriptorMap;
    navigation: NavigationHelpers<ParamListBase, BottomTabNavigationEventMap>;
    insets: EdgeInsets;
};

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 = {
    /**
     * 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;
    };
};

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.
     */
    tabBarTestID?: string;
    /**
     * Function which returns a React element to render as the tab bar button.
     * Renders `Pressable` 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;
    };
    /**
     * 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;
    /**
     * 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 this screen should be unmounted when navigating away from it.
     * Defaults to `false`.
     */
    unmountOnBlur?: 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;
};

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 BottomTabScreenProps<
    ParamList extends ParamListBase,
    RouteName extends keyof ParamList = keyof ParamList,
    NavigatorID extends string | undefined = undefined
> = {
    navigation: BottomTabNavigationProp<ParamList, RouteName, NavigatorID>;
    route: RouteProp<ParamList, RouteName>;
};