expo-router
Version:
Expo Router is a file-based router for React Native and web applications.
53 lines (52 loc) • 1.61 kB
TypeScript
import type { NativeStackHeaderItemSpacing } from '../../../../react-navigation/native-stack';
import type { StackToolbarSpacerProps } from './types';
export type { StackToolbarSpacerProps, NativeToolbarSpacerProps } from './types';
/**
* A spacing helper used inside `Stack.Toolbar` to create empty space between toolbar items.
*
* In left/right placements, width is required.
* In bottom placement, if width is not provided, creates a flexible spacer that expands to fill space.
*
* > **Note:** Flexible spacers are iOS-only. On Android, `width` is a required property
*
* @example
* ```tsx
* import { Stack } from 'expo-router';
*
* export default function Page() {
* return (
* <>
* <Stack.Toolbar placement="left">
* <Stack.Toolbar.Button icon="arrow.left" />
* <Stack.Toolbar.Spacer width={8} />
* <Stack.Toolbar.Button icon="arrow.right" />
* </Stack.Toolbar>
* <ScreenContent />
* </>
* );
* }
* ```
*
* @example
* ```tsx
* import { Stack } from 'expo-router';
*
* export default function Page() {
* return (
* <>
* <Stack.Toolbar>
* <Stack.Toolbar.Spacer />
* <Stack.Toolbar.Button icon="search" />
* <Stack.Toolbar.Spacer />
* </Stack.Toolbar>
* <ScreenContent />
* </>
* );
* }
* ```
*
* @platform android
* @platform ios
*/
export declare const StackToolbarSpacer: React.FC<StackToolbarSpacerProps>;
export declare function convertStackToolbarSpacerPropsToRNHeaderItem(props: StackToolbarSpacerProps): NativeStackHeaderItemSpacing | undefined;