1type NativeGlassHeaderItem = {
2 readonly type: "button" | "menu";
3 readonly glassEffect?: boolean;
4 readonly hidesSharedBackground?: boolean;
5 readonly sharesBackground?: boolean;
6 readonly variant?: "plain" | "done" | "prominent";
7 readonly axisBehavior?: "automatic" | "horizontalOnly" | "verticalPreferred";
8 readonly width?: number;
9};
10
11/**
12 * iOS 26/27 Mail-style header controls need the native glass button
13 * shared background configuration when they are not part of a larger toolbar.
14 * Do not enable `glassEffect` for normal bar-button items: react-native-screens
15 * renders that as a custom UIButton, which creates a second skinny capsule.
16 */
17export function withNativeGlassHeaderItem<T extends NativeGlassHeaderItem>(
18 item: T,
19 options: {
20 readonly hidesSharedBackground?: boolean;
21 readonly sharesBackground?: boolean;
22 readonly width?: number;
23 } = {},
24): T {
25 const sharesBackground = options.sharesBackground ?? item.sharesBackground ?? true;
26 return {
27 ...item,
28 glassEffect: item.glassEffect ?? false,
29 hidesSharedBackground: options.hidesSharedBackground ?? item.hidesSharedBackground ?? false,
30 sharesBackground,
31 variant: item.variant ?? "plain",
32 width: options.width ?? item.width,
33 } as T;
34}