import { type ReactNode } from 'react'; import type { ColorValue } from 'react-native'; import { type ToolbarPlacement } from './context'; import type { NativeStackNavigationOptions } from '../../../react-navigation/native-stack'; export interface StackToolbarProps { /** * Child elements to compose the toolbar. Can include Stack.Toolbar.Button, * Stack.Toolbar.Menu, Stack.Toolbar.View, Stack.Toolbar.Spacer, and * Stack.Toolbar.SearchBarSlot (bottom placement, iOS only) components. * * @platform android * @platform ios */ children?: ReactNode; /** * The placement of the toolbar. * * - `'left'`: Renders items in the left area of the header. * - `'right'`: Renders items in the right area of the header. * - `'bottom'`: Renders items in the bottom toolbar. * * @default 'bottom' * * @platform android * @platform ios */ placement?: ToolbarPlacement; /** * When `true`, renders children as a custom component in the header area, * replacing the default header layout. * * Only applies to `placement="left"` and `placement="right"`. * * @default false * * @platform android * @platform ios */ asChild?: boolean; /** * When `true`, disables automatic keyboard (IME) padding on the bottom toolbar. * * Only applies to `placement="bottom"` on Android. * * @default false * @platform android */ disableImePadding?: boolean; /** * Tint color applied to toolbar items (buttons, menu icons, text). * Individual items can override this with their own `tintColor` prop. * * @platform android */ tintColor?: ColorValue; /** * Background color for the toolbar and its menus. * * @platform android */ backgroundColor?: ColorValue; } /** * The component used to configure the stack toolbar. * * - Use `placement="left"` to customize the left side of the header. * - Use `placement="right"` to customize the right side of the header. * - Use `placement="bottom"` (default) to show a bottom toolbar. * * If multiple instances of this component are rendered for the same screen, * the last one rendered in the component tree takes precedence. * * > **Note:** Using `Stack.Toolbar` with `placement="left"` or `placement="right"` will * automatically make the header visible (`headerShown: true`), as the toolbar is rendered * as part of the native header. * * > **Note:** `Stack.Toolbar` with `placement="bottom"` can only be used inside **page** * components, not in layout components. * * * @example * ```tsx * import { Stack } from 'expo-router'; * * export default function Layout() { * return ( * * * * alert('Left button pressed!')} /> * * * alert('Right button pressed!')} /> * * * * ); * } * ``` * * @example * ```tsx * import { Stack } from 'expo-router'; * * export default function Page() { * return ( * <> * * alert('Left button pressed!')} /> * * * * {}} /> * * * * * ); * } * ``` * * @experimental * @platform android * @platform ios */ export declare const StackToolbar: { (props: StackToolbarProps): import("react/jsx-runtime").JSX.Element; Button: import("react").FC; Menu: import("react").FC; MenuAction: import("react").FC; SearchBarSlot: import("react").FC; Spacer: import("react").FC; View: import("react").FC; Label: import("react").FC; Icon: import("react").FC; Badge: import("react").FC; }; export declare function appendStackToolbarPropsToOptions(options: NativeStackNavigationOptions, props: StackToolbarProps): NativeStackNavigationOptions; export default StackToolbar; //# sourceMappingURL=StackToolbarClient.d.ts.map