Skip to content

Commit caafa67

Browse files
committed
Document navigationKey
1 parent 6bcd73e commit caafa67

File tree

2 files changed

+26
-0
lines changed

2 files changed

+26
-0
lines changed

versioned_docs/version-6.x/group.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,15 @@ When you pass a function, it'll receive the [`route`](route-prop.md) and [`navig
6262
These options are merged with the `options` specified in the individual screens, and the screen's options will take precedence over the group's options.
6363

6464
See [Options for screens](screen-options.md) for more details and examples.
65+
66+
### `navigationKey`
67+
68+
Optional key for a group of screens screen. If the key changes, all existing screens in this group will be removed or reset:
69+
70+
```js
71+
<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
72+
{/* screens */}
73+
</Stack.Group>
74+
```
75+
76+
This is similar to the [`navigationKey`](screen.md#navigationkey) prop on `Screen`, but applies to a group of screens.

versioned_docs/version-6.x/screen.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,17 @@ Render callback to return React Element to use for the screen:
133133
You can use this approach instead of the `component` prop if you need to pass additional props. Though we recommend using [React context](https://reactjs.org/docs/context.html) for passing data instead.
134134

135135
> Note: By default, React Navigation applies optimizations to screen components to prevent unnecessary renders. Using a render callback removes those optimizations. So if you use a render callback, you'll need to ensure that you use [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo) or [`React.PureComponent`](https://reactjs.org/docs/react-api.html#reactpurecomponent) for your screen components to avoid performance issues.
136+
137+
### `navigationKey`
138+
139+
Optional key for this screen. This doesn't need to be unique. If the key changes, existing screens with this name will be removed (if used in a stack navigator) or reset (if used in a tab or drawer navigator).
140+
141+
This can be useful when we have some screens which we want to be removed or reset when the condition changes:
142+
143+
```js
144+
<Stack.Screen
145+
navigationKey={isSignedIn ? 'user' : 'guest'}
146+
name="Profile"
147+
component={ProfileScreen}
148+
/>
149+
```

0 commit comments

Comments
 (0)