Skip to content

Commit e655d1d

Browse files
committed
Document header option for native stack
1 parent 74257d4 commit e655d1d

File tree

6 files changed

+52
-5
lines changed

6 files changed

+52
-5
lines changed

versioned_docs/version-5.x/drawer-navigator.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,9 @@ Whether you can use gestures to open or close the drawer. Setting this to `false
372372

373373
#### `header`
374374

375-
Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
375+
Custom header to use instead of the default header.
376+
377+
This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:
376378

377379
- `layout` - Dimensions of the screen
378380
- `scene` - This contains 2 properties:

versioned_docs/version-5.x/stack-navigator.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,9 @@ String that can be used as a fallback for `headerTitle`.
9292

9393

9494

95-
Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
95+
Custom header to use instead of the default header.
96+
97+
This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:
9698

9799
- `mode` - Mode of the header - `float` or `screen`
98100
- `layout` - Dimensions of the screen

versioned_docs/version-6.x/bottom-tab-navigator.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,9 @@ In addition to those, the following options are also supported in bottom tabs:
331331

332332
#### `header`
333333

334-
Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
334+
Custom header to use instead of the default header.
335+
336+
This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:
335337

336338
- `navigation` - The navigation object for the current screen.
337339
- `route` - The route object for the current screen.

versioned_docs/version-6.x/drawer-navigator.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,9 @@ In addition to those, the following options are also supported in drawer:
430430

431431
#### `header`
432432

433-
Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
433+
Custom header to use instead of the default header.
434+
435+
This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:
434436

435437
- `navigation` - The navigation object for the current screen.
436438
- `route` - The route object for the current screen.

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,43 @@ React.useEffect(() => {
307307
}, [navigation]);
308308
```
309309

310+
#### `header`
311+
312+
Custom header to use instead of the default header.
313+
314+
This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:
315+
316+
- `navigation` - The navigation object for the current screen.
317+
- `route` - The route object for the current screen.
318+
- `options` - The options for the current screen
319+
- `back` - Options for the back button, contains an object with a `title` property to use for back button label.
320+
321+
Example:
322+
323+
```js
324+
import { getHeaderTitle } from '@react-navigation/elements';
325+
326+
// ..
327+
328+
header: ({ navigation, route, options, back }) => {
329+
const title = getHeaderTitle(options, route.name);
330+
331+
return (
332+
<MyHeader
333+
title={title}
334+
leftButton={
335+
back ? <MyBackButton onPress={navigation.goBack} /> : undefined
336+
}
337+
style={options.headerStyle}
338+
/>
339+
);
340+
};
341+
```
342+
343+
To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.
344+
345+
Note that if you specify a custom header, the native functionality such as large title, search bar etc. won't work.
346+
310347
#### `statusBarAnimation`
311348

312349
Sets the status bar animation (similar to the `StatusBar` component).

versioned_docs/version-6.x/stack-navigator.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,9 @@ In addition to those, the following options are also supported in stack:
218218

219219
#### `header`
220220

221-
Function that returns a React Element to display as a header. It accepts an object containing the following properties as the argument:
221+
Custom header to use instead of the default header.
222+
223+
This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:
222224

223225
- `navigation` - The navigation object for the current screen.
224226
- `route` - The route object for the current screen.

0 commit comments

Comments
 (0)