Skip to content

Commit 1b3439e

Browse files
committed
chore(docs): Added more screenshots to header options
1 parent d55455b commit 1b3439e

File tree

8 files changed

+27
-0
lines changed

8 files changed

+27
-0
lines changed
Loading
Loading
Loading
Loading
Loading
Loading
Loading

versioned_docs/version-7.x/native-stack-navigator.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,10 +298,20 @@ Blur effect for the translucent header. The `headerTransparent` option needs to
298298
Supported values:
299299

300300
- `extraLight`
301+
<img src="/assets/7.x/native-stack/headerBlurEffect-extralight.png" width="500" alt="Header blur effect extraLight" />
302+
301303
- `light`
304+
<img src="/assets/7.x/native-stack/headerBlurEffect-light.png" width="500" alt="Header blur effect light" />
305+
302306
- `dark`
307+
<img src="/assets/7.x/native-stack/headerBlurEffect-dark.png" width="500" alt="Header blur effect dark" />
308+
303309
- `regular`
310+
<img src="/assets/7.x/native-stack/headerBlurEffect-regular.png" width="500" alt="Header blur effect regular" />
311+
304312
- `prominent`
313+
<img src="/assets/7.x/native-stack/headerBlurEffect-prominent.png" width="500" alt="Header blur effect prominent" />
314+
305315
- `systemUltraThinMaterial`
306316
- `systemThinMaterial`
307317
- `systemMaterial`
@@ -324,10 +334,27 @@ Only supported on iOS.
324334

325335
Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient.
326336

337+
<img src="/assets/7.x/native-stack/headerBackground.png" width="500" alt="Header background" />
338+
339+
Example:
340+
341+
```js
342+
headerBackground: () => (
343+
<LinearGradient
344+
colors={['#c17388', '#90306f']}
345+
style={{ flex: 1 }}
346+
start={{ x: 0, y: 0 }}
347+
end={{ x: 1, y: 0 }}
348+
/>
349+
),
350+
```
351+
327352
#### `headerTintColor`
328353

329354
Tint color for the header. Changes the color of back button and title.
330355

356+
<img src="/assets/7.x/native-stack/headerTintColor.png" width="500" alt="Header tint color" />
357+
331358
#### `headerLeft`
332359

333360
Function which returns a React Element to display on the left side of the header. This replaces the back button. See `headerBackVisible` to show the back button along side left element.

0 commit comments

Comments
 (0)