import type { NativeStackHeaderItemButton } from '@react-navigation/native-stack'; import type { ImageRef } from 'expo-image'; import { type ReactNode } from 'react'; import { type StyleProp, type TextStyle } from 'react-native'; import { type StackHeaderItemSharedProps } from './shared'; export interface StackToolbarButtonProps { accessibilityLabel?: string; accessibilityHint?: string; /** * There are two ways to specify the content of the button: * * @example * ```tsx * import { Stack } from 'expo-router'; * * export default function Page() { * return ( * <> * * As text passed as children * * * * ); * } * ``` * * @example * ```tsx * import { Stack } from 'expo-router'; * * export default function Page() { * return ( * <> * * * * As components * 3 * * * * * ); * } * ``` * * > **Note**: When icon is used, the label will not be shown and will be used for accessibility purposes only. Badge is only supported in left/right placements, not in bottom (iOS toolbar limitation). */ children?: ReactNode; disabled?: boolean; /** * Whether the button should be hidden. * * @default false */ hidden?: boolean; /** * Whether to hide the shared background. * * @platform iOS 26+ */ hidesSharedBackground?: boolean; /** * Icon to display in the button. * * Can be a string representing an SFSymbol or an image source. * * > **Note**: When used in `placement="bottom"`, only string SFSymbols are supported. Use the `image` prop to provide custom images. */ icon?: StackHeaderItemSharedProps['icon']; /** * Image to display in the button. * * > **Note**: This prop is only supported in toolbar with `placement="bottom"`. */ image?: ImageRef; /** * Controls how image-based icons are rendered on iOS. * * - `'template'`: iOS applies tint color to the icon * - `'original'`: Preserves original icon colors (useful for multi-color icons) * * **Default behavior:** * - If `tintColor` is specified, defaults to `'template'` * - If no `tintColor`, defaults to `'original'` * * This prop only affects image-based icons (not SF Symbols). * * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uiimage/renderingmode-swift.enum) for more information. * * @platform ios */ iconRenderingMode?: 'template' | 'original'; onPress?: () => void; /** * Whether to separate the background of this item from other header items. * * @default false */ separateBackground?: boolean; /** * Whether the button is in a selected state * * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information */ selected?: boolean; /** * Style for the label of the header item. */ style?: StyleProp; /** * The tint color to apply to the button item * * @see [Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/tintcolor) for more information. */ tintColor?: StackHeaderItemSharedProps['tintColor']; /** * @default 'plain' */ variant?: StackHeaderItemSharedProps['variant']; } /** * A button used inside `Stack.Toolbar`. * * @example * ```tsx * import { Stack } from 'expo-router'; * * export default function Layout() { * return ( * * * * alert('Left pressed')} /> * * * * ); * } * ``` * * @example * ```tsx * import { Stack } from 'expo-router'; * * export default function Page() { * return ( * <> * * alert('Left pressed')} /> * * * * ); * } * ``` * * @platform ios */ export declare const StackToolbarButton: React.FC; export declare function convertStackToolbarButtonPropsToRNHeaderItem(props: StackToolbarButtonProps): NativeStackHeaderItemButton | undefined; //# sourceMappingURL=StackToolbarButton.d.ts.map