Skip to content

Commit c7d4c5e

Browse files
committed
Tweak header documentation
1 parent 518ee50 commit c7d4c5e

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ String that can be used as a fallback for `headerTitle`.
8686

8787
#### `header`
8888

89-
Function that given `HeaderProps` returns a React Element, to display as a header.
89+
Function that given `HeaderProps` returns a React Element, to display as a header. Make sure to set `headerMode` to `screen` as well when using a custom header (see below for more details).
9090

9191
Example:
9292

@@ -116,20 +116,6 @@ To set a custom header for all the screens in the navigator, you can specify thi
116116

117117
When using a custom header, there are 2 important things to keep in mind:
118118

119-
##### Specify a `height` in `headerStyle`
120-
121-
If your header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches.
122-
123-
Example:
124-
125-
```js
126-
headerStyle: {
127-
height: 80, // Specify the height of your custom header
128-
};
129-
```
130-
131-
Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use `scene.descriptor.options.headerStyle` from the props.
132-
133119
##### Set `headerMode` to `screen`
134120

135121
By default, there is one floating header which renders headers for multiple screens on iOS. These headers include animations to smoothly switch to one another.
@@ -151,6 +137,20 @@ return (
151137
);
152138
```
153139

140+
##### Specify a `height` in `headerStyle`
141+
142+
If your header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches.
143+
144+
Example:
145+
146+
```js
147+
headerStyle: {
148+
height: 80, // Specify the height of your custom header
149+
};
150+
```
151+
152+
Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use `scene.descriptor.options.headerStyle` from the props.
153+
154154
#### `headerShown`
155155

156156
Whether to show or hide the header for the screen. The header is shown by default unless:

0 commit comments

Comments
 (0)