Skip to content

Commit 5ded908

Browse files
brentvatnebrentvatne
committed
Add documentation for getActiveChildNavigationOptions.Fixes react-navigation#265 
1 parent 1d5e1a5 commit 5ded908

File tree

2 files changed

+98
-10
lines changed

2 files changed

+98
-10
lines changed

‎docs/navigation-options-resolution.md‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -83,10 +83,6 @@ MyOtherComponent.navigationOptions = {
8383

8484
We also know that `createStackNavigator` and related functions return React components. So when we set the `navigationOptions` directly on the `HomeStack` and `SettingsStack` component, it allows us to control the `navigationOptions` for its parent navigator when its used as a screen component. In this case, the `navigationOptions` on our stack components configure the label in the tab navigator that renders the stacks.
8585

86-
## **Caution**: the navigationOptions property vs configuration
87-
88-
Navigators are initialized with `create*Navigator(routeConfig, navigatorConfig)`. Inside of `navigatorConfig` we can add a `defaultNavigationOptions` property. These `defaultNavigationOptions` are the default options for screens within that navigator ([read more about sharing common navigationOptions](headers.html#sharing-common-navigationoptions-across-screens)), they do not refer to the `navigationOptions` for that navigator — as we have seen above, we set the `navigationOptions` property directly on the navigator for that use case.
89-
9086
```js
9187
const HomeStack = createStackNavigator({ A }, {
9288
// This is the default for screens in the stack, so `A` will
@@ -103,7 +99,55 @@ HomeStack.navigationOptions = {
10399
};
104100
```
105101

106-
We understand that overloading the naming here is a little bit confusing. Please [open a RFC](https://github.com/react-navigation/rfcs) if you have a suggestion about how we can make this API easier to learn and work with.
102+
Another way you could write this is:
103+
104+
```js
105+
const HomeStack = createStackNavigator({ A }, {
106+
// This applies to the parent navigator
107+
navigationOptions: {
108+
tabBarLabel: 'Home!',
109+
},
110+
// This applies to child routes
111+
defaultNavigationOptions: {
112+
title: 'Welcome'
113+
}
114+
});
115+
```
116+
117+
<a href="https://snack.expo.io/@react-navigation/nested-navigationoptions-title-v3" target="blank" class="run-code-button">&rarr; Run this code</a>
118+
119+
# getActiveChildNavigationOptions
120+
121+
If you would like to get the `navigationOptions` from the active child of a navigator, you can do that with `getActiveChildNavigationOptions`. This makes it possible for you to set the `tabBarLabel` directly on a screen inside of a stack that is inside of a tab, for example.
122+
123+
```jsx
124+
class A extends React.Component {
125+
static navigationOptions = {
126+
title: 'Welcome',
127+
tabBarLabel: 'Home!',
128+
};
129+
130+
render() {
131+
return <Placeholder text="A!" />;
132+
}
133+
}
134+
135+
const HomeStack = createStackNavigator({ A }, {
136+
navigationOptions: ({ navigation, screenProps }) => ({
137+
// you can put fallback values before here, eg: a default tabBarLabel
138+
...getActiveChildNavigationOptions(navigation, screenProps),
139+
// put other navigationOptions that you don't want the active child to
140+
// be able to override here!
141+
})
142+
});
143+
```
144+
145+
<a href="https://snack.expo.io/@react-navigation/nested-navigationoptions-active-child-v3" target="blank" class="run-code-button">&rarr; Run this code</a>
146+
147+
# **Note**: the navigationOptions property vs navigator configuration
148+
149+
Navigators are initialized with `create*Navigator(routeConfig, navigatorConfig)`. Inside of `navigatorConfig` we can add a `defaultNavigationOptions` property. These `defaultNavigationOptions` are the default options for screens within that navigator ([read more about sharing common navigationOptions](headers.html#sharing-common-navigationoptions-across-screens)), they do not refer to the `navigationOptions` for that navigator &mdash; as we have seen above, we set the `navigationOptions` property directly on the navigator for that use case.
150+
107151

108152
# A stack contains a tab navigator and you want to set the title on the stack header
109153

‎website/versioned_docs/version-3.x/navigation-options-resolution.md‎

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,6 @@ MyOtherComponent.navigationOptions = {
8484

8585
We also know that `createStackNavigator` and related functions return React components. So when we set the `navigationOptions` directly on the `HomeStack` and `SettingsStack` component, it allows us to control the `navigationOptions` for its parent navigator when its used as a screen component. In this case, the `navigationOptions` on our stack components configure the label in the tab navigator that renders the stacks.
8686

87-
## **Caution**: the navigationOptions property vs configuration
88-
89-
Navigators are initialized with `create*Navigator(routeConfig, navigatorConfig)`. Inside of `navigatorConfig` we can add a `defaultNavigationOptions` property. These `defaultNavigationOptions` are the default options for screens within that navigator ([read more about sharing common navigationOptions](headers.html#sharing-common-navigationoptions-across-screens)), they do not refer to the `navigationOptions` for that navigator &mdash; as we have seen above, we set the `navigationOptions` property directly on the navigator for that use case.
90-
9187
```js
9288
const HomeStack = createStackNavigator({ A }, {
9389
// This is the default for screens in the stack, so `A` will
@@ -104,7 +100,55 @@ HomeStack.navigationOptions = {
104100
};
105101
```
106102

107-
We understand that overloading the naming here is a little bit confusing. Please [open a RFC](https://github.com/react-navigation/rfcs) if you have a suggestion about how we can make this API easier to learn and work with.
103+
Another way you could write this is:
104+
105+
```js
106+
const HomeStack = createStackNavigator({ A }, {
107+
// This applies to the parent navigator
108+
navigationOptions: {
109+
tabBarLabel: 'Home!',
110+
},
111+
// This applies to child routes
112+
defaultNavigationOptions: {
113+
title: 'Welcome'
114+
}
115+
});
116+
```
117+
118+
<a href="https://snack.expo.io/@react-navigation/nested-navigationoptions-title-v3" target="blank" class="run-code-button">&rarr; Run this code</a>
119+
120+
# getActiveChildNavigationOptions
121+
122+
If you would like to get the `navigationOptions` from the active child of a navigator, you can do that with `getActiveChildNavigationOptions`. This makes it possible for you to set the `tabBarLabel` directly on a screen inside of a stack that is inside of a tab, for example.
123+
124+
```jsx
125+
class A extends React.Component {
126+
static navigationOptions = {
127+
title: 'Welcome',
128+
tabBarLabel: 'Home!',
129+
};
130+
131+
render() {
132+
return <Placeholder text="A!" />;
133+
}
134+
}
135+
136+
const HomeStack = createStackNavigator({ A }, {
137+
navigationOptions: ({ navigation, screenProps }) => ({
138+
// you can put fallback values before here, eg: a default tabBarLabel
139+
...getActiveChildNavigationOptions(navigation, screenProps),
140+
// put other navigationOptions that you don't want the active child to
141+
// be able to override here!
142+
})
143+
});
144+
```
145+
146+
<a href="https://snack.expo.io/@react-navigation/nested-navigationoptions-active-child-v3" target="blank" class="run-code-button">&rarr; Run this code</a>
147+
148+
# **Note**: the navigationOptions property vs navigator configuration
149+
150+
Navigators are initialized with `create*Navigator(routeConfig, navigatorConfig)`. Inside of `navigatorConfig` we can add a `defaultNavigationOptions` property. These `defaultNavigationOptions` are the default options for screens within that navigator ([read more about sharing common navigationOptions](headers.html#sharing-common-navigationoptions-across-screens)), they do not refer to the `navigationOptions` for that navigator &mdash; as we have seen above, we set the `navigationOptions` property directly on the navigator for that use case.
151+
108152

109153
# A stack contains a tab navigator and you want to set the title on the stack header
110154

0 commit comments

Comments
 (0)