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