import React from 'react'; import { type ColorValue, type StyleProp, type ViewStyle } from 'react-native'; import type { ImageSource } from 'react-native/Libraries/Image/ImageSource'; import type { AppleIcon, BaseRoute, IconRenderingMode, LayoutDirection, NavigationState, TabRole } from './types'; import { type BottomAccessoryViewProps } from './BottomAccessoryView'; interface Props { labeled?: boolean; /** * A tab bar style that adapts to each platform. * * that varies depending on the platform: * Tab views using the sidebar adaptable style have an appearance * - iPadOS displays a top tab bar that can adapt into a sidebar. * - iOS displays a bottom tab bar. * - macOS and tvOS always show a sidebar. * - visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`. */ sidebarAdaptable?: boolean; /** * Whether to disable page animations between tabs. (iOS only) Defaults to `false`. */ disablePageAnimations?: boolean; /** * Whether to enable haptic feedback. Defaults to `false`. */ hapticFeedbackEnabled?: boolean; /** * Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only) */ scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent'; /** * Behavior for minimizing the tab bar. (iOS 26+) */ minimizeBehavior?: 'automatic' | 'onScrollDown' | 'onScrollUp' | 'never'; /** * Active tab color. */ tabBarActiveTintColor?: ColorValue; /** * Inactive tab color. * Has no effect on iOS 26 and above (Liquid Glass). */ tabBarInactiveTintColor?: ColorValue; /** * Enables the experimental iOS 26 Liquid Glass tint color workaround that bakes tab labels into images. * This has many drawbacks, such as affecting icon sizing when labels have different widths, bad positioning of badges, and possibly breaking accessibility features. * * @platform ios */ experimental_bakedTintColors?: boolean; /** * State for the tab view. * * The state should contain a `routes` prop which is an array of objects containing `key` and `title` props, such as `{ key: 'music', title: 'Music' }`. * */ navigationState: NavigationState; /** * Function which takes an object with the route and returns a React element. */ renderScene: (props: { route: Route; jumpTo: (key: string) => void; }) => React.ReactNode | null; /** * Callback which is called on tab change, receives the index of the new tab as argument. */ onIndexChange: (index: number) => void; /** * Callback which is called on long press on tab, receives the index of the tab as argument. */ onTabLongPress?: (index: number) => void; /** * Get lazy for the current screen. Uses true by default. */ getLazy?: (props: { route: Route; }) => boolean | undefined; /** * Get label text for the tab, uses `route.title` by default. */ getLabelText?: (props: { route: Route; }) => string | undefined; /** * Get badge for the tab, uses `route.badge` by default. */ getBadge?: (props: { route: Route; }) => string | undefined; /** * Get badge background color for the tab, uses `route.badgeBackgroundColor` by default. (Android only) */ getBadgeBackgroundColor?: (props: { route: Route; }) => ColorValue | undefined; /** * Get badge text color for the tab, uses `route.badgeTextColor` by default. (Android only) */ getBadgeTextColor?: (props: { route: Route; }) => ColorValue | undefined; /** * Get active tint color for the tab, uses `route.activeTintColor` by default. */ getActiveTintColor?: (props: { route: Route; }) => ColorValue | undefined; /** * Determines whether the tab prevents default action (switching tabs) on press, uses `route.preventsDefault` by default. */ getPreventsDefault?: (props: { route: Route; }) => boolean | undefined; /** * Get icon for the tab, uses `route.focusedIcon` by default. */ getIcon?: (props: { route: Route; focused: boolean; }) => ImageSource | AppleIcon | undefined | null; /** * Get the rendering mode for the tab icon, uses `route.iconRenderingMode` by default. * * Use `original` to preserve multicolor image icons instead of applying the native tab tint. */ getIconRenderingMode?: (props: { route: Route; }) => IconRenderingMode | undefined; /** * Get hidden for the tab, uses `route.hidden` by default. * If `true`, the tab will be hidden. */ getHidden?: (props: { route: Route; }) => boolean | undefined; /** * Get testID for the tab, uses `route.testID` by default. */ getTestID?: (props: { route: Route; }) => string | undefined; /** * Get role for the tab, uses `route.role` by default. (iOS only) */ getRole?: (props: { route: Route; }) => TabRole | undefined; /** * Custom tab bar to render. Set to `null` to hide the tab bar completely. */ tabBar?: () => React.ReactNode; /** * Get freezeOnBlur for the current screen. Uses false by default. */ getFreezeOnBlur?: (props: { route: Route; }) => boolean | undefined; /** * Get style for the scene, uses `route.style` by default. */ getSceneStyle?: (props: { route: Route; }) => StyleProp; tabBarStyle?: { /** * Background color of the tab bar. */ backgroundColor?: ColorValue; }; /** * A Boolean value that indicates whether the tab bar is translucent. (iOS only) */ translucent?: boolean; rippleColor?: ColorValue; /** * Color of tab indicator. (Android only) */ activeIndicatorColor?: ColorValue; tabLabelStyle?: { /** * Font family for the tab labels. */ fontFamily?: string; /** * Font weight for the tab labels. */ fontWeight?: string; /** * Font size for the tab labels. */ fontSize?: number; }; /** * A function that returns a React element to display as bottom accessory view. * iOS 26+ only. * * @platform ios */ renderBottomAccessoryView?: BottomAccessoryViewProps['renderBottomAccessoryView']; /** * The direction of the layout. * @default 'locale' */ layoutDirection?: LayoutDirection; /** * Whether to hide the native tab bar. */ tabBarHidden?: boolean; } declare const TabView: ({ navigationState, renderScene, onIndexChange, onTabLongPress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getIconRenderingMode, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarHidden, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, layoutDirection, experimental_bakedTintColors: experimentalBakedTintColors, ...props }: Props) => import("react/jsx-runtime").JSX.Element; export default TabView; //# sourceMappingURL=TabView.d.ts.map