expo-router
Version:
Expo Router is a file-based router for React Native and web applications.
146 lines (145 loc) • 5.17 kB
TypeScript
import { type ReactNode } from 'react';
import type { ColorValue } from 'react-native';
import type { NativeStackNavigationOptions } from '../../../react-navigation/native-stack';
import { type ToolbarPlacement } from './context';
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;
/**
* Color of the round container behind each header button and menu button.
* Use it to keep buttons visible over content, like a photo or a map.
*
* @platform android
*/
buttonContainerColor?: 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 (
* <Stack>
* <Stack.Screen name="index">
* <Stack.Toolbar placement="left">
* <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
* </Stack.Toolbar>
* <Stack.Toolbar placement="right">
* <Stack.Toolbar.Button icon="ellipsis.circle" onPress={() => alert('Right button pressed!')} />
* </Stack.Toolbar>
* </Stack.Screen>
* </Stack>
* );
* }
* ```
*
* @example
* ```tsx
* import { Stack } from 'expo-router';
*
* export default function Page() {
* return (
* <>
* <Stack.Toolbar placement="left">
* <Stack.Toolbar.Button icon="sidebar.left" onPress={() => alert('Left button pressed!')} />
* </Stack.Toolbar>
* <Stack.Toolbar>
* <Stack.Toolbar.Spacer />
* <Stack.Toolbar.Button icon="magnifyingglass" onPress={() => {}} />
* <Stack.Toolbar.Spacer />
* </Stack.Toolbar>
* <ScreenContent />
* </>
* );
* }
* ```
*
* @platform android
* @platform ios
*/
export declare const StackToolbar: {
(props: StackToolbarProps): import("react").JSX.Element;
Button: import("react").FC<import("./StackToolbarButton").StackToolbarButtonProps>;
Menu: import("react").FC<import("./StackToolbarMenu").StackToolbarMenuProps>;
MenuAction: import("react").FC<import("./StackToolbarMenu").StackToolbarMenuActionProps>;
SearchBarSlot: import("react").FC<import("./StackToolbarSearchBarSlot").StackToolbarSearchBarSlotProps>;
Spacer: import("react").FC<import("./StackToolbarSpacer").StackToolbarSpacerProps>;
View: import("react").FC<import("./StackToolbarView").StackToolbarViewProps>;
Label: import("react").FC<import("./toolbar-primitives").StackToolbarLabelProps>;
Icon: import("react").FC<import("./toolbar-primitives").StackToolbarIconProps>;
Badge: import("react").FC<import("./toolbar-primitives").StackToolbarBadgeProps>;
};
export declare function appendStackToolbarPropsToOptions(options: NativeStackNavigationOptions, props: StackToolbarProps): NativeStackNavigationOptions;
export default StackToolbar;