Skip to content

Commit d55455b

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

File tree

7 files changed

+33
-1
lines changed

7 files changed

+33
-1
lines changed
Binary file not shown.
Binary file not shown.
Loading
Loading
Loading
975 KB
Binary file not shown.

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

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,14 +210,23 @@ Supported properties:
210210

211211
Only supported on iOS.
212212

213+
<video playsInline autoPlay muted loop style={{ width: "500px" }}>
214+
<source src="/assets/7.x/native-stack/headerLargeStyle.mp4" />
215+
</video>
216+
213217
#### `headerLargeTitle`
214218

215-
Whether to enable header with large title which collapses to regular header on scroll.
219+
Whether to enable header with large title which collapses to regular header on scroll.
220+
Defaults to `false`.
216221

217222
For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as `ScrollView` or `FlatList`. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify `contentInsetAdjustmentBehavior="automatic"` in your `ScrollView`, `FlatList` etc.
218223

219224
Only supported on iOS.
220225

226+
<video playsInline autoPlay muted loop style={{ width: "500px" }}>
227+
<source src="/assets/7.x/native-stack/headerLargeTitle.mp4" />
228+
</video>
229+
221230
#### `headerLargeTitleShadowVisible`
222231

223232
Whether drop shadow of header is visible when a large title is shown.
@@ -233,6 +242,19 @@ Style object for large title in header. Supported properties:
233242

234243
Only supported on iOS.
235244

245+
<img src="/assets/7.x/native-stack/headerLargeTitleStyle.png" width="500" alt="Header large title style" />
246+
247+
Example:
248+
249+
```js
250+
headerLargeTitleStyle: {
251+
fontFamily: 'Georgia',
252+
fontSize: 22,
253+
fontWeight: '500',
254+
color: 'blue',
255+
},
256+
```
257+
236258
#### `headerShown`
237259

238260
Whether to show the header. The header is shown by default. Setting this to `false` hides the header.
@@ -243,10 +265,20 @@ Style object for header. Supported properties:
243265

244266
- `backgroundColor`
245267

268+
<video playsInline autoPlay muted loop style={{ width: "500px" }}>
269+
<source src="/assets/7.x/native-stack/headerStyle.mp4" />
270+
</video>
271+
246272
#### `headerShadowVisible`
247273

248274
Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header.
249275

276+
Android:
277+
<img src="/assets/7.x/native-stack/headerShadowVisible-Android.png" width="500" alt="Header shadow visible Android" />
278+
279+
iOS:
280+
<img src="/assets/7.x/native-stack/headerShadowVisible-iOS.png" width="500" alt="Header shadow visible iOS" />
281+
250282
#### `headerTransparent`
251283

252284
Boolean indicating whether the navigation bar is translucent.

0 commit comments

Comments
 (0)