react-native-screens
Version:
Native navigation primitives for your React Native app.
204 lines • 8.4 kB
TypeScript
import type { ReactNode } from 'react';
import type { TabsBottomAccessoryEnvironment } from '../bottom-accessory/TabsBottomAccessory.types';
import type { ColorValue, NativeSyntheticEvent } from 'react-native';
/**
* @summary Payload of the event emitted when the user taps the "More" tab bar item.
*
* @description
* This event fires when the user taps the system-generated "More" tab bar item.
* It does NOT fire when a tab is selected from within the More list — that triggers
* the normal `onTabSelected` event instead.
*
* The payload carries the navigation state that was active at the moment the "More" tab was tapped.
*
* @platform ios
*/
export type MoreTabSelectedEvent = {
/** Screen key of the tab that was active when "More" was tapped. */
selectedScreenKey: string;
/** Provenance of the navigation state when "More" was tapped. */
provenance: number;
};
export type TabsBottomAccessoryComponentFactory = (environment: TabsBottomAccessoryEnvironment) => ReactNode;
export type TabBarMinimizeBehavior = 'automatic' | 'never' | 'onScrollDown' | 'onScrollUp';
export type TabBarControllerMode = 'automatic' | 'tabBar' | 'tabSidebar';
export type TabBarSidebarPreferredPlacement = 'automatic' | 'sidebar' | 'tabBar';
export interface TabsHostPropsIOS {
/**
* @summary Whether changes of `tabBarHidden` are animated.
*
* When `true`, the tab bar is hidden and shown with the system transition
* (`UITabBarController.setTabBarHidden(_:animated:)`). When `false`, the
* tab bar disappears and reappears immediately.
*
* Available starting from iOS 18. On earlier versions the tab bar visibility
* is never animated, regardless of this prop.
*
* @default true
*
* @platform ios
* @supported iOS 18 or higher
*/
tabBarHiddenAnimationEnabled?: boolean | undefined;
/**
* @summary Specifies the color used for selected tab's text and icon color.
*
* Starting from iOS 26, it also impacts glow of Liquid Glass tab
* selection view.
*
* `tabBarItemTitleFontColor` and `tabBarItemIconColor` defined on
* TabsScreen component override this color.
*
* @platform ios
*/
tabBarTintColor?: ColorValue | undefined;
/**
* @summary Specifies the minimize behavior for the tab bar.
*
* Available starting from iOS 26.
*
* The following values are currently supported:
*
* - `automatic` - resolves to the system default minimize behavior
* - `never` - the tab bar does not minimize
* - `onScrollDown` - the tab bar minimizes when scrolling down and
* expands when scrolling back up
* - `onScrollUp` - the tab bar minimizes when scrolling up and expands
* when scrolling back down
*
* The supported values correspond to the official UIKit documentation:
* @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/minimizebehavior|UITabBarController.MinimizeBehavior}
*
* @default Defaults to `automatic`.
*
* @platform ios
* @supported iOS 26 or higher
*/
tabBarMinimizeBehavior?: TabBarMinimizeBehavior | undefined;
/**
* @summary Specifies component used as bottom accessory.
*
* This prop is a function that accepts `environment` as a parameter and returns
* the component that will be rendered in the bottom accessory.
*
* `environment` can be one of the following values:
*
* - `regular` - the accessory is laid out above the bottom tab bar,
* - `inline` - the accessory is laid out inline with the collapsed bottom
* tab bar.
*
* If this prop is `undefined`, the bottom accessory will not be rendered.
*
* In order to allow accessory rendering based on environment, the component is
* rendered 2 times for both `regular` and `inline` environments at the same time.
* Environment determines which component is visible at given moment. This might
* require implementing a solution to share state between both rendered components
* (e.g. usage of context).
*
* Available starting from iOS 26.
*
* @platform iOS
* @supported iOS 26 or higher
*/
bottomAccessory?: TabsBottomAccessoryComponentFactory | undefined;
/**
* @summary Hides the bottom accessory with animation.
*
* @default false
*
* @platform iOS
* @supported iOS 26 or higher
*/
bottomAccessoryHidden?: boolean | undefined;
/**
* @summary Specifies the display mode for the tab bar.
*
* Available starting from iOS 18.
* Not supported on tvOS.
*
* The following values are currently supported:
*
* - `automatic` - the system sets the display mode based on the tab’s content
* - `tabBar` - the system displays the content only as a tab bar
* - `tabSidebar` - the tab bar is displayed as a sidebar
*
* See the official documentation for more details:
* @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/mode|UITabBarController.Mode}
*
* @default Defaults to `automatic`.
*
* @platform ios
* @supported iOS 18 or higher
*/
tabBarControllerMode?: TabBarControllerMode | undefined;
/**
* @summary Specifies whether the sidebar or the tab bar is preferred when only
* one of them can be displayed.
*
* @description
* The following values are currently supported:
*
* - `automatic` - the system resolves to the platform default (the tab bar on iOS)
* - `sidebar` - the sidebar is displayed when it is available
* - `tabBar` - the tab bar is displayed
*
* This prop requires `tabBarControllerMode` to be set to `tabSidebar`.
* Otherwise, the sidebar is not considered a supported mode and the tab bar
* is always displayed.
*
* The button that shows the sidebar is visible only when the screen has
* a header. After using it, the sidebar is displayed and the content is accessible.
*
* The sidebar can also be shown with a swipe from the leading edge.
* In this case, the sidebar overlaps the content, and the content is not accessible until
* the sidebar is hidden.
*
* The sidebar is enabled only when the interface has a regular
* horizontal size class. On iPhone, this applies only to larger models
* (e.g. Pro Max, Plus and Air) in landscape orientation. On other iPhones
* (e.g. iPhone 18 Pro), and on all iPhones in portrait orientation,
* the tab bar is always displayed.
*
* @default Defaults to `automatic`.
*
* Not supported on tvOS.
*
* @platform ios
* @supported iOS 27 or higher
*/
tabBarSidebarPreferredPlacement?: TabBarSidebarPreferredPlacement | undefined;
/**
* @summary `screenKey` of the tab screen that should receive the prominent treatment.
*
* Must match the `screenKey` of one of the child `TabsScreen`s. Where supported, that tab
* receives enhanced visual emphasis in the tab bar - it is detached from the other items
* onto its own surface and stays visible when the tab bar minimizes on scroll
* (see `tabBarMinimizeBehavior`).
*
* When omitted, a tab with `role: 'search'` and `automaticallyActivatesSearch` enabled
* becomes prominent automatically, otherwise no tab is prominent.
*
* @see {@link https://developer.apple.com/documentation/uikit/uitabbarcontroller/prominenttabidentifier|UITabBarController.prominentTabIdentifier}
*
* Not supported on tvOS.
*
* @platform ios
* @supported iOS 27 or higher
*/
prominentScreenKey?: string | undefined;
/**
* @summary
* A callback that gets invoked when the user taps the "More" tab bar item.
*
* @description
* This event fires when the user taps the system-generated "More" tab bar item.
* It does NOT fire when a tab is selected from within the More list — that triggers
* the normal `onTabSelected` event instead.
*
* @see {@link MoreTabSelectedEvent}
*
* @platform ios
*/
onMoreTabSelected?: ((event: NativeSyntheticEvent<MoreTabSelectedEvent>) => void) | undefined;
}
//# sourceMappingURL=TabsHost.ios.types.d.ts.map