1import type { ReactNode } from "react";
2import type { ColorValue } from "react-native";
3import type { AppNativeStackNavigationOptions } from "../native/StackHeader";
4import type { AppSymbolName } from "./AppSymbol";
5
6export interface ScreenHeaderAction {
7 readonly accessibilityLabel: string;
8 readonly icon: AppSymbolName;
9 readonly onPress: () => void;
10 readonly disabled?: boolean;
11 /** Shows a spinner in place of the icon while the action's work is pending. */
12 readonly loading?: boolean;
13 readonly selected?: boolean;
14 readonly tintColor?: ColorValue;
15}
16
17export type ScreenHeaderMenuItem =
18 | {
19 readonly id: string;
20 readonly title: string;
21 readonly icon?: string;
22 readonly subtitle?: string;
23 readonly disabled?: boolean;
24 readonly selected?: boolean;
25 readonly onPress: () => void;
26 }
27 | {
28 readonly id: string;
29 readonly title?: string;
30 readonly icon?: string;
31 readonly inline?: boolean;
32 readonly items: ReadonlyArray<ScreenHeaderMenuItem>;
33 };
34
35export interface ScreenHeaderMenu {
36 readonly title: string;
37 readonly icon: AppSymbolName;
38 readonly status?: string;
39 readonly separateBackground?: boolean;
40 readonly items: ReadonlyArray<ScreenHeaderMenuItem>;
41}
42
43export interface ScreenHeaderSearch {
44 readonly value: string;
45 readonly onChangeText: (value: string) => void;
46 readonly placeholder: string;
47 readonly mode?: "inline" | "collapsible";
48 readonly compactToolbar?: boolean;
49 readonly compactPlaceholder?: string;
50 readonly closeAccessibilityLabel?: string;
51 readonly clearAccessibilityLabel?: string;
52 readonly onRefresh?: () => void;
53 readonly refreshAccessibilityLabel?: string;
54 readonly refreshInToolbar?: boolean;
55}
56
57export interface ScreenHeaderProps {
58 readonly title: string;
59 readonly subtitle?: string;
60 readonly actions?: ReadonlyArray<ScreenHeaderAction>;
61 readonly menus?: ReadonlyArray<ScreenHeaderMenu>;
62 readonly search?: ScreenHeaderSearch;
63 readonly onBack?: () => void;
64 readonly sidebar?: boolean;
65 readonly backInSplitView?: {
66 readonly accessibilityLabel: string;
67 readonly icon: string;
68 readonly separateBackground?: boolean;
69 readonly onPress?: () => void;
70 };
71 readonly hideBottomBorder?: boolean;
72 readonly trailing?: ReactNode;
73 /** Search scenes use sheet colors on iOS and header colors on Android. */
74 readonly matchSearchSurface?: boolean;
75 /** Custom native layouts can override options without duplicating the header renderer. */
76 readonly options?: AppNativeStackNavigationOptions;
77 readonly optionsVersion?: unknown;
78}