You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: versioned_docs/version-6.x/screen.md
+42-2Lines changed: 42 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -95,9 +95,49 @@ Callback to return an unique ID to use for the screen. It receives an object wit
95
95
/>
96
96
```
97
97
98
-
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.
98
+
By default, `navigate('ScreenName', params)` identifies the screen by its name. So if you're on `ScreenName` and navigate to `ScreenName` again, it won't add a new screen even if the params are different - it'll update the current screen with the new params instead:
99
99
100
-
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.
100
+
```js
101
+
// Let's say you're on `Home` screen
102
+
// Then you navigate to `Profile` screen with `userId: 1`
103
+
navigation.navigate('Profile', { userId:1 });
104
+
105
+
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
106
+
107
+
// Then you navigate to `Profile` screen again with `userId: 2`
108
+
navigation.navigate('Profile', { userId:2 });
109
+
110
+
// The stack will now have: `Home` -> `Profile` with `userId: 2`
111
+
```
112
+
113
+
If you specify `getId` and it doesn't return `undefined`, the screen is identified by both the screen name and the returned ID. Which means that if you're on `ScreenName` and navigate to `ScreenName` again with different params - and return a different ID from the `getId` callback, it'll add a new screen to the stack:
114
+
115
+
```js
116
+
// Let's say you're on `Home` screen
117
+
// Then you navigate to `Profile` screen with `userId: 1`
118
+
navigation.navigate('Profile', { userId:1 });
119
+
120
+
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
121
+
122
+
// Then you navigate to `Profile` screen again with `userId: 2`
123
+
navigation.navigate('Profile', { userId:2 });
124
+
125
+
// The stack will now have: `Home` -> `Profile` with `userId: 1` -> `Profile` with `userId: 2`
126
+
```
127
+
128
+
The `getId` callback can also be used to ensure that the screen with the same ID doesn't appear multiple times in the stack:
129
+
130
+
```js
131
+
// Let's say you have a stack with the screens: `Home` -> `Profile` with `userId: 1` -> `Settings`
132
+
// Then you navigate to `Profile` screen with `userId: 1` again
133
+
navigation.navigate('Profile', { userId:1 });
134
+
135
+
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
136
+
```
137
+
138
+
In the above examples, `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.
139
+
140
+
If `getId` is specified in a tab or drawer navigator, the screen will remount if the ID changes.
Copy file name to clipboardExpand all lines: versioned_docs/version-7.x/screen.md
+42-2Lines changed: 42 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -95,9 +95,49 @@ Callback to return an unique ID to use for the screen. It receives an object wit
95
95
/>
96
96
```
97
97
98
-
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.
98
+
By default, `navigate('ScreenName', params)`updates the current screen if the screen name matches, otherwise adds a new screen in a stack navigator. So if you're on `ScreenName` and navigate to `ScreenName` again, it won't add a new screen even if the params are different - it'll update the current screen with the new params instead:
99
99
100
-
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.
100
+
```js
101
+
// Let's say you're on `Home` screen
102
+
// Then you navigate to `Profile` screen with `userId: 1`
103
+
navigation.navigate('Profile', { userId:1 });
104
+
105
+
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
106
+
107
+
// Then you navigate to `Profile` screen again with `userId: 2`
108
+
navigation.navigate('Profile', { userId:2 });
109
+
110
+
// The stack will now have: `Home` -> `Profile` with `userId: 2`
111
+
```
112
+
113
+
If you specify `getId` and it doesn't return `undefined`, the screen is identified by both the screen name and the returned ID. Which means that if you're on `ScreenName` and navigate to `ScreenName` again with different params - and return a different ID from the `getId` callback, it'll add a new screen to the stack:
114
+
115
+
```js
116
+
// Let's say you're on `Home` screen
117
+
// Then you navigate to `Profile` screen with `userId: 1`
118
+
navigation.navigate('Profile', { userId:1 });
119
+
120
+
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
121
+
122
+
// Then you navigate to `Profile` screen again with `userId: 2`
123
+
navigation.navigate('Profile', { userId:2 });
124
+
125
+
// The stack will now have: `Home` -> `Profile` with `userId: 1` -> `Profile` with `userId: 2`
126
+
```
127
+
128
+
The `getId` callback can also be used to ensure that the screen with the same ID doesn't appear multiple times in the stack:
129
+
130
+
```js
131
+
// Let's say you have a stack with the screens: `Home` -> `Profile` with `userId: 1` -> `Settings`
132
+
// Then you navigate to `Profile` screen with `userId: 1` again
133
+
navigation.navigate('Profile', { userId:1 });
134
+
135
+
// Now the stack will have: `Home` -> `Profile` with `userId: 1`
136
+
```
137
+
138
+
In the above examples, `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.
139
+
140
+
If `getId` is specified in a tab or drawer navigator, the screen will remount if the ID changes.
0 commit comments