Skip to content

Commit 6ae17e0

Browse files
authored
docs(Android, Stack v5): add missing docs to StackHeaderConfig (#3897)
## Description Adds missing docs to `StackHeaderConfig`.
1 parent 058a2fc commit 6ae17e0

2 files changed

Lines changed: 143 additions & 6 deletions

File tree

src/components/gamma/stack/header/StackHeaderConfig.android.types.ts

Lines changed: 106 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,130 @@ export type StackHeaderBackgroundSubviewCollapseModeAndroid =
99
StackHeaderSubviewCollapseModeAndroid;
1010

1111
export interface StackHeaderToolbarSubviewAndroid {
12+
/**
13+
* @summary The React component rendered in this toolbar slot.
14+
*
15+
* The subview is sized by React Native's layout engine but positioned by the
16+
* platform native layout. Each subview is placed independently — subviews do
17+
* not participate in a shared flex layout and cannot influence each other's
18+
* sizing.
19+
*
20+
*
21+
* @remarks
22+
* Intrinsic sizing and explicit dimensions work as expected. Avoid
23+
* parent-relative sizing (e.g. `flex: 1`) on the root element — it will
24+
* produce incorrect dimensions. Flex layout within a root that has a known
25+
* size works as expected.
26+
*
27+
* @platform android
28+
*/
1229
Component: ReactNode;
1330
}
1431

1532
export interface StackHeaderBackgroundSubviewAndroid {
33+
/**
34+
* @summary Controls how the background subview behaves when the app bar
35+
* collapses.
36+
*
37+
* The following values are available:
38+
* - `off` - the subview scrolls away with the app bar,
39+
* - `parallax` - the subview scrolls at a slower rate, creating a parallax
40+
* effect.
41+
*
42+
* @remarks
43+
* `pin` is not currently supported because the background subview is
44+
* stretched to match the entire `AppBarLayout`, which causes pinned content
45+
* to move immediately rather than staying fixed. Support for `pin` collapse
46+
* mode might be added in the future.
47+
*
48+
* @default off
49+
*
50+
* @platform android
51+
*/
1652
collapseMode?: StackHeaderSubviewCollapseModeAndroid | undefined;
53+
/**
54+
* @summary The React component rendered as the header background.
55+
*
56+
* The subview is stretched to match the header (`AppBarLayout`) dimensions,
57+
* so parent-relative sizing (e.g. `flex: 1`) works correctly.
58+
*
59+
* @platform android
60+
*/
1761
Component: ReactNode;
1862
}
1963

2064
export interface StackHeaderConfigPropsAndroid {
65+
/**
66+
* @summary Specifies the type of the Material 3 app bar.
67+
*
68+
* The following values are available:
69+
* - `small` - small app bar with fixed title,
70+
* - `medium` - medium app bar with collapsing title,
71+
* - `large` - large app bar with collapsing title.
72+
*
73+
* @remarks
74+
* M3 Expressive headers aren't currently supported (there is no stable
75+
* `MDC-Android` version yet).
76+
*
77+
* @see {@link https://m3.material.io/components/app-bars/overview|Material Design 3: App bars}
78+
*
79+
* @default small
80+
*
81+
* @platform android
82+
*/
2183
type?: StackHeaderTypeAndroid | undefined;
84+
/**
85+
* @summary Custom view rendered behind the header content.
86+
*
87+
* @platform android
88+
*/
2289
backgroundSubview?: StackHeaderBackgroundSubviewAndroid | undefined;
90+
/**
91+
* @summary Custom view placed in the leading (start) slot of the toolbar.
92+
*
93+
* @platform android
94+
*/
2395
leadingSubview?: StackHeaderToolbarSubviewAndroid | undefined;
96+
/**
97+
* @summary Custom view placed in the center slot of the toolbar.
98+
*
99+
* @platform android
100+
*/
24101
centerSubview?: StackHeaderToolbarSubviewAndroid | undefined;
102+
/**
103+
* @summary Custom view placed in the trailing (end) slot of the toolbar.
104+
*
105+
* @platform android
106+
*/
25107
trailingSubview?: StackHeaderToolbarSubviewAndroid | undefined;
26108
/**
27-
* Tint color for the back button icon.
28-
* - `undefined` — use default tint (for custom images, no tint is applied)
29-
* - `ColorValue` — apply a custom tint color
109+
* @summary Tint color applied to the back button icon.
110+
*
111+
* When `undefined`, the default tint color is used. This applies to the
112+
* native back arrow and `drawableResource` icons that have an associated
113+
* tint. For `imageSource` icons, no tint is applied by default.
114+
*
115+
* @platform android
30116
*/
31117
backButtonTintColor?: ColorValue | undefined;
32118
/**
33-
* Custom icon for the back button.
34-
* - `undefined` — use the native default back arrow
35-
* - `PlatformIconAndroid` — use a custom icon (drawableResource or imageSource)
119+
* @summary Custom icon for the back button.
120+
*
121+
* When `undefined`, the native back arrow (`homeAsUpIndicator`) is used.
122+
*
123+
* Supported values:
124+
* - `{ type: 'imageSource', imageSource }`
125+
* Uses an image from the provided resource.
126+
*
127+
* Remarks: `imageSource` type doesn't support SVGs on Android.
128+
* For loading SVGs use `drawableResource` type.
129+
*
130+
* - `{ type: 'drawableResource', name }`
131+
* Uses a drawable resource with the given name.
132+
*
133+
* Remarks: Requires passing a drawable to resources via Android Studio.
134+
*
135+
* @platform android
36136
*/
37137
backButtonIcon?: PlatformIconAndroid | undefined;
38138
}

src/components/gamma/stack/header/StackHeaderConfig.types.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,46 @@ import { StackHeaderConfigPropsAndroid } from './StackHeaderConfig.android.types
22
import { StackHeaderConfigPropsIOS } from './StackHeaderConfig.ios.types';
33

44
export interface StackHeaderConfigPropsBase {
5+
/**
6+
* @summary Title displayed in the header.
7+
*
8+
* @platform android, ios
9+
*/
510
title?: string | undefined;
11+
/**
12+
* @summary Specifies if the header should be hidden.
13+
*
14+
* @default false
15+
*
16+
* @platform android, ios
17+
*/
618
hidden?: boolean | undefined;
19+
/**
20+
* @summary Specifies if the content should be rendered behind the header.
21+
*
22+
* When `true`, content is rendered behind the header instead of starting
23+
* below it.
24+
*
25+
* On Android:
26+
* - The header background color is not affected by this prop.
27+
* - Setting this prop to `true` is not supported when header scrolling is
28+
* enabled.
29+
*
30+
* @default false
31+
*
32+
* @platform android, ios
33+
*/
734
transparent?: boolean | undefined;
35+
/**
36+
* @summary Specifies if the back button should be hidden.
37+
*
38+
* This prop does not apply to the root screen of the stack for which the back
39+
* button is always hidden.
40+
*
41+
* @default false
42+
*
43+
* @platform android, ios
44+
*/
845
backButtonHidden?: boolean | undefined;
946
}
1047

0 commit comments

Comments
 (0)