Skip to content

Commit 10a7a2f

Browse files
committed
Mention getId in navigate docs
1 parent a881ec9 commit 10a7a2f

File tree

3 files changed

+18
-1
lines changed

3 files changed

+18
-1
lines changed

versioned_docs/version-5.x/navigation-actions.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ navigation.dispatch(
4444
);
4545
```
4646

47+
In a [stack navigator](stack-navigator.md), calling `navigate` with a screen name will result in different behavior based on if the screen is already present or not. If the screen is already present in the stack's history, it'll go back to that screen and remove any screens after that. If the screen is not present, it'll push a new screen.
48+
49+
By default, the screen is identified by its name. But you can also customize it to take the params into account by using the [`getId`](screen.md#getid) prop.
4750
### reset
4851

4952
The `reset` action allows to reset the [navigation state](navigation-state.md) to the given state. It takes the following arguments:

versioned_docs/version-5.x/navigation-prop.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,20 @@ function HomeScreen({ navigation: { navigate } }) {
7878
}
7979
```
8080

81+
In a [stack navigator](stack-navigator.md), calling `navigate` with a screen name will result in different behavior based on if the screen is already present or not. If the screen is already present in the stack's history, it'll go back to that screen and remove any screens after that. If the screen is not present, it'll push a new screen.
82+
83+
For example, if you have a stack with the history `Home > Profile > Settings` and you call `navigate(Profile)`, the resulting screens will be `Home > Profile` as it goes back to `Profile` and removes the `Settings` screen.
84+
85+
By default, the screen is identified by its name. But you can also customize it to take the params into account by using the [`getId`](screen.md#getid) prop.
86+
87+
For example, say you have specified a `getId` prop for `Profile` screen:
88+
89+
```js
90+
<Screen name={Profile} component={ProfileScreen} getId={({ params }) => params.userId} />
91+
```
92+
93+
Now, if you have a stack with the history `Home > Profile (userId: bob) > Settings` and you call `navigate(Profile, { userId: 'alice' })`, the resulting screens will be `Home > Profile (userId: bob) > Settings > Profile (userId: alice)` since it'll add a new `Profile` screen as no matching screen was found.
94+
8195
### `goBack`
8296

8397
The `goBack` method lets us go back to the previous screen in the navigator.

versioned_docs/version-5.x/screen.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ Callback to return an unique ID to use for the screen. It receives an object wit
8383
/>
8484
```
8585

86-
When it's specified and doesn't return `undefined`, the unique ID is respected for any navigation. For a given screen name, there will always be only one screen corresponding to an ID.
86+
By default, calling `navigate('ScreenName', params)` identifies the screen by its name, and navigates to the existing screen instead of adding a new one. If you specify `getId` and it doesn't return `undefined`, the screen is identified by both the screen name and the returned ID.
8787

8888
This is useful for preventing multiple instances of the same screen in the navigator, e.g. - when `params.userId` is used as an ID, subsequent navigation to the screen with the same `userId` will navigate to the existing screen instead of adding a new one to the stack. If the navigation was with a different `userId`, then it'll add a new screen.
8989

0 commit comments

Comments
 (0)