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-8.x/navigation-lifecycle.md
+25-1Lines changed: 25 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -359,7 +359,7 @@ Here, "inactive" and "unfocused" have different meanings:
359
359
-[Preloaded](navigation-actions.md#preload) screens don't become inactive until after the first time they become focused, so their effects can run to initialize the screen
360
360
- Focus and blur are part of navigation lifecycle, but "inactive" is an optimization mechanism
361
361
362
-
When a screen is paused, the following things happen:
362
+
Paused screens internally use [`<Activity mode="hidden">`](https://react.dev/reference/react/Activity). When a screen is paused, the following things happen:
363
363
364
364
- Effects are cleaned up (similar to when a component unmounts)
365
365
- Content stays rendered and the state is preserved
@@ -375,6 +375,30 @@ Pausing screens is not a replacement for lifecycle events. Treat it as an optimi
375
375
376
376
:::
377
377
378
+
React doesn't provide a way to distinguish paused screens from unmounted screens, which presents some caveats:
379
+
380
+
- APIs such as [`getRootState`](navigation-container.md#getrootstate) won't include state of navigators nested inside paused screens
381
+
- When using [state persistence](state-persistence.md), state of navigators nested inside paused screens won't be persisted
382
+
383
+
If you don't want this behavior, you can set `inactiveBehavior` to `none` to avoid pausing them:
384
+
385
+
```js static2dynamic
386
+
constMyTabs=createBottomTabNavigator({
387
+
screenOptions: {
388
+
// highlight-next-line
389
+
inactiveBehavior:'none',
390
+
},
391
+
screens: {
392
+
Home:createBottomTabScreen({
393
+
screen: HomeScreen,
394
+
}),
395
+
Profile:createBottomTabScreen({
396
+
screen: ProfileScreen,
397
+
}),
398
+
},
399
+
});
400
+
```
401
+
378
402
## Summary
379
403
380
404
- Screens stay mounted when navigating away from them
0 commit comments