Skip to content

Commit 8c192e0

Browse files
brentvatnebrentvatne
committed
Finish headers section
1 parent 59c4c47 commit 8c192e0

File tree

4 files changed

+90
-14
lines changed

4 files changed

+90
-14
lines changed

‎docs/auth-flow.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
22
id: auth-flow
3-
title: Building a sign in flow
4-
sidebar_label: Building a sign in flow
3+
title: Authentication flows
4+
sidebar_label: Authentication flows
55
---

‎docs/headers.md

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,8 +94,74 @@ There are a couple of things to notice here:
9494
1. On iOS the status bar is black, and this doesn't look great over a dark colored background. We won't discuss it here, but you should be sure to configure the status bar to fit with your screen colors [as described in the status bar guide](status-bar.html).
9595
2. The configuration we set only applies to the home screen; when we navigate to the details screen, the default styles are back. We'll look at how to share `navigationOptions` between screens now.
9696

97-
## Sharing `navigationOptions` across screens
97+
## Sharing common `navigationOptions` across screens
9898

99+
It is common to want to configure the header in a similar way across many screen. For example, your company brand color might be red and so you want the header background color to be red and tint color to be white. Conveniently, these are the colors we're using our running example, and you'll notice that when you navigate to the `DetailsScreen` the colors go back to the defaults. Wouldn't it be awful if we had to copy the `navigationOptions` header style properties from `HomeScreen` to `DetailsScreen`, and for every single screen component we use in our app? Thankfully, we do not. We can instead move the configuration up to the `StackNavigator`.
100+
101+
```js
102+
class HomeScreen extends React.Component {
103+
static navigationOptions = {
104+
title: 'Home',
105+
/* No more header config here! */
106+
};
107+
108+
/* render function, etc */
109+
}
110+
111+
/* other code... */
112+
113+
const RootStack = StackNavigator(
114+
{
115+
Home: {
116+
screen: HomeScreen,
117+
},
118+
Details: {
119+
screen: DetailsScreen,
120+
},
121+
},
122+
{
123+
initialRouteName: 'Home',
124+
/* The header config from HomeScreen is now here */
125+
navigationOptions: {
126+
headerStyle: {
127+
backgroundColor: '#f4511e',
128+
},
129+
headerTintColor: '#fff',
130+
headerTitleStyle: {
131+
fontWeight: 'bold',
132+
},
133+
},
134+
}
135+
);
136+
```
137+
<a href="https://snack.expo.io/@react-navigation/sharing-header-styles" target="blank" class="run-code-button">&rarr; Run this code</a>
138+
139+
Now, any screen that belongs to the `RouteStack` will have our wonderful branded styles. Surely though, there must be a way to override these options if we need to?
140+
141+
## Overriding shared `navigationOptions`
142+
143+
The `navigationOptions` specified on your screen component are merged together with those of its parent `StackNavigator`, with the options on the screen component taking precedence. Let's use this knowledge to invert the background and tint colors on the details screen.
144+
145+
146+
```js
147+
class DetailsScreen extends React.Component {
148+
static navigationOptions = ({ navigation }) => {
149+
const { params } = navigation.state;
150+
151+
return {
152+
title: params ? params.otherParam : 'A Nested Details Screen',
153+
/* These values are used instead of the shared configuration! */
154+
headerStyle: {
155+
backgroundColor: '#fff',
156+
},
157+
headerTintColor: '#f4511e',
158+
};
159+
};
160+
161+
/* render function, etc */
162+
}
163+
```
164+
<a href="https://snack.expo.io/@react-navigation/overriding-shared-header-styles" target="blank" class="run-code-button">&rarr; Run this code</a>
99165

100166
## Using a different component for the title
101167

@@ -110,9 +176,10 @@ class ChatScreen extends React.Component {
110176
}
111177
```
112178

179+
113180
## Additional configuration
114181

115-
You can read the full list of available screen `navigationOptions` in the [StackNavigator reference](stack-navigator.html#screen-navigation-options).
182+
You can read the full list of available screen `navigationOptions` for screens inside of `StackNavigator` in the [StackNavigator reference](stack-navigator.html#screen-navigation-options).
116183

117184
<!-- Each screen can configure various aspects about how it gets presented in parent navigators. You can configure
118185

‎website/core/Footer.js

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,34 +28,43 @@ class Footer extends React.Component {
2828
this.props.config.baseUrl +
2929
'docs/' +
3030
this.props.language +
31-
'/doc1.html'
31+
'/getting-started.html'
3232
}>
33-
Getting Started (or other categories)
33+
Getting Started
3434
</a>
3535
<a
3636
href={
3737
this.props.config.baseUrl +
3838
'docs/' +
3939
this.props.language +
40-
'/doc2.html'
40+
'/api-reference.html'
4141
}>
42-
Guides (or other categories)
42+
API Reference
4343
</a>
4444
<a
4545
href={
4646
this.props.config.baseUrl +
4747
'docs/' +
4848
this.props.language +
49-
'/doc3.html'
49+
'/custom-navigator-overview.html'
5050
}>
51-
API Reference (or other categories)
51+
Building your own Navigator
52+
</a>
53+
<a
54+
href={
55+
this.props.config.baseUrl +
56+
'docs/' +
57+
this.props.language +
58+
'/contributing.html'
59+
}>
60+
Contributing
5261
</a>
5362
</div>
5463
<div>
5564
<h5>Support</h5>
5665
<a href="https://discord.gg/4xEK3nD">Chat in our Discord channel</a>
57-
<a href="https://react-navigation.canny.io/feature-requests">Request a Feature on Canny</a>
58-
<a href="https://github.com/react-navigation/react-navigation/issues">Report a Bug on Github</a>
66+
<a href="https://react-navigation.canny.io/feature-requests">Request a feature on Canny</a>
67+
<a href="https://github.com/react-navigation/react-navigation/issues">Report a bug on Github</a>
5968
<a
6069
href="https://stackoverflow.com/questions/tagged/react-navigation"
6170
target="_blank">

‎website/i18n/en.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
"StackNavigator reference": "StackNavigator reference",
1919
"tab-navigator": "Tab-based navigation",
2020
"Tab-based navigation": "Tab-based navigation",
21-
"auth-flow": "Building a sign in flow",
22-
"Building a sign in flow": "Building a sign in flow",
21+
"auth-flow": "Authentication flows",
22+
"Authentication flows": "Authentication flows",
2323
"composing-navigators": "Adding tabs",
2424
"Adding tabs": "Adding tabs",
2525
"contributing": "React Navigation contributing guide",

0 commit comments

Comments
 (0)