Repository: expo/expo
File: packages/expo-router/src/toolbar/elements.tsx (TypeScript)

Code before:
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
   *
   * @platform iOS 26+
   * @default false
   */
  sharesBackground?: boolean;
}

/**
 * A search bar component for the toolbar.
 * It should only be used as a child of `Toolbar`.
 *
 * > **Note**: The stack header must be visible in order to add a search bar.
 * > Once `Toolbar.SearchBar` is used, the search bar will no longer be available
 * > in this screen’s header.
 *
 * @example
 * ```tsx
 * <Toolbar>
 *   <Toolbar.SearchBar />
 *   <Toolbar.Spacer />
 *   <Toolbar.Button icon="mic" />
 * </Toolbar>
 * ```
 *
 * @see [React Native Screens SearchBarProps](https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx#L822) for more information about available props.
 *
 * @platform ios 26+
 */
export const ToolbarSearchBar = ({
  hidesSharedBackground,
  hidden,
  sharesBackground,
  ...searchBarProps
}: ToolbarSearchBarProps) => {
  const id = useId();
  if (process.env.EXPO_OS !== 'ios' || parseInt(String(Platform.Version).split('.')[0], 10) < 26) {
    return null;
  }
  if (hidden) {
    return null;
  }
  const placement =
    searchBarProps.placement !== 'integrated' && searchBarProps.placement !== 'integratedButton'
      ? 'integrated'
      : searchBarProps.placement;
  return (
    <RouterToolbarItem
      hidesSharedBackground={hidesSharedBackground}
      identifier={id}
      sharesBackground={sharesBackground}

Review comment (suggestion):
```suggestion
 * @see [React Native Screens `SearchBarProps`](https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx#L822) for more information about available props.
```

Code after:
 *   <Toolbar.Button icon="mic" />
 *   <Toolbar.Spacer />
 * </Toolbar>
 * ```
 *
 * @platform ios
 */
export const ToolbarSpacer = (props: ToolbarSpacerProps) => {
  const id = useId();
  return (
    <RouterToolbarItem
      hidesSharedBackground={props.hidesSharedBackground}
      hidden={props.hidden}
      identifier={id}
      sharesBackground={props.sharesBackground}
      type={props.width ? 'fixedSpacer' : 'fluidSpacer'}
      width={props.width}
    />
  );
};

export interface ToolbarSearchBarPreferredSlotProps {
  /**
   * Whether to hide the shared background when `sharesBackground` is enabled.
   *
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/hidessharedbackground) for more information.
   *
   * @platform iOS 26+
   */
  hidesSharedBackground?: boolean;
  /**
   * Whether the search bar placed in the toolbar should be hidden.
   *
   * @default false
   */
  hidden?: boolean;
  /**
   * Whether the search bar shares the background with adjacent toolbar items.
   *
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
   *
   * @platform iOS 26+
   * @default false
   */
  sharesBackground?: boolean;
}

/**
 * Declares the position of a search bar within the toolbar.
 * It should only be used as a child of `Toolbar`.
 *