File tree Expand file tree Collapse file tree 8 files changed +27
-0
lines changed
static/assets/7.x/native-stack
versioned_docs/version-7.x Expand file tree Collapse file tree 8 files changed +27
-0
lines changed Original file line number Diff line number Diff line change @@ -298,10 +298,20 @@ Blur effect for the translucent header. The `headerTransparent` option needs to
298
298
Supported values:
299
299
300
300
- ` extraLight `
301
+ <img src =" /assets/7.x/native-stack/headerBlurEffect-extralight.png " width =" 500 " alt =" Header blur effect extraLight " />
302
+
301
303
- ` light `
304
+ <img src =" /assets/7.x/native-stack/headerBlurEffect-light.png " width =" 500 " alt =" Header blur effect light " />
305
+
302
306
- ` dark `
307
+ <img src =" /assets/7.x/native-stack/headerBlurEffect-dark.png " width =" 500 " alt =" Header blur effect dark " />
308
+
303
309
- ` regular `
310
+ <img src =" /assets/7.x/native-stack/headerBlurEffect-regular.png " width =" 500 " alt =" Header blur effect regular " />
311
+
304
312
- ` prominent `
313
+ <img src =" /assets/7.x/native-stack/headerBlurEffect-prominent.png " width =" 500 " alt =" Header blur effect prominent " />
314
+
305
315
- ` systemUltraThinMaterial `
306
316
- ` systemThinMaterial `
307
317
- ` systemMaterial `
@@ -324,10 +334,27 @@ Only supported on iOS.
324
334
325
335
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.
326
336
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
+
327
352
#### ` headerTintColor `
328
353
329
354
Tint color for the header. Changes the color of back button and title.
330
355
356
+ <img src =" /assets/7.x/native-stack/headerTintColor.png " width =" 500 " alt =" Header tint color " />
357
+
331
358
#### ` headerLeft `
332
359
333
360
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.
You can’t perform that action at this time.
0 commit comments