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

Code before:
   * @example
   * ```tsx
   * import { useImage } from 'expo-image';
   * import { Toolbar } from 'expo-router/unstable-toolbar';
   *
   * const customIcon = useImage('https://example.com/icon.png', {
   *   maxWidth: 44,
   *   maxHeight: 44,
   * });
   *
   * <Toolbar.Button image={customIcon} onPress={() => {}} />
   * ```
   */
  image?: ImageRef | null;

  /**
   * Callback function when the button is pressed.
   */
  onPress?: () => void;

  /**
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/possibletitles) for more information.
   */
  possibleTitles?: string[];

  /**
   * Whether the button is in a selected state
   *
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.
   */
  selected?: boolean;

  /**
   * Whether to separate the background of this item from other header items.
   *
   * > **Note**: Text buttons cannot share the background.
   *
   * This prop reverses the native behavior of `sharesBackground`.
   *
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/sharesbackground) for more information.
   *
   * @default false
   *
   * @platform iOS 26+
   */
  separateBackground?: boolean;

  /**
   * Style for the label of the header item.
   */
  style?: StyleProp<BasicTextStyle>;

Review comment (suggestion):
One thing I don't love about two different source props is that you can have `icon="star" image="..."`. Should circle back on a reasonable type system that combines the two.

Code after:

  // TODO: support ImageSourcePropType icons in addition to SFSymbols
  /**
   * The name of the SF Symbol to display as the button icon.
   * For a list of available symbols, see [SF Symbols](https://developer.apple.com/sf-symbols/).
   */
  icon?: SFSymbol;

  /**
   * Custom image loaded using expo-image's `useImage` hook.
   * Takes priority over `icon` (SF Symbol) when both are provided.
   *
   * @example
   * ```tsx
   * import { useImage } from 'expo-image';
   * import { Toolbar } from 'expo-router/unstable-toolbar';
   *
   * const customIcon = useImage('https://example.com/icon.png', {
   *   maxWidth: 44,
   *   maxHeight: 44,
   * });
   *
   * <Toolbar.Button image={customIcon} onPress={() => {}} />
   * ```
   */
  image?: ImageRef | null;

  /**
   * Callback function when the button is pressed.
   */
  onPress?: () => void;

  /**
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/possibletitles) for more information.
   */
  possibleTitles?: string[];

  /**
   * Whether the button is in a selected state
   *
   * @see [Official Apple documentation](https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected) for more information.
   */
  selected?: boolean;

  /**
   * Whether to separate the background of this item from other header items.
   *
   * > **Note**: Text buttons cannot share the background.
   *
   * This prop reverses the native behavior of `sharesBackground`.
   *