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-5.x/navigation-state.md
+8-2Lines changed: 8 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -10,6 +10,7 @@ It's a JavaScript object which looks like this:
10
10
11
11
```js
12
12
conststate= {
13
+
type:'stack',
13
14
key:'stack-1',
14
15
routeNames: ['Home', 'Profile', 'Settings'],
15
16
routes: [
@@ -23,11 +24,12 @@ const state = {
23
24
24
25
There are few properties present in every navigation state object:
25
26
27
+
-`type` - Type of the navigator that the state belongs to, e.g. `stack`, `tab`, `drawer`.
26
28
-`key` - Unique key to identify the navigator.
27
29
-`routeName` - Name of the screens defined in the navigator. This is an unique array containing strings for each screen.
28
-
-`routes` - List of route objects (screens) which are rendered in the navigator. It also represents the history in a stack navigator.
30
+
-`routes` - List of route objects (screens) which are rendered in the navigator. It also represents the history in a stack navigator. There should be at least one item present in this array.
29
31
-`index` - Index of the focused route object in the `routes` array.
30
-
-`history` - A list of visited items. This is an optional property and not present in all navigators. For example, it's only present in tab and drawer navigators in the core. The shape of the items in the `history` array can vary depending on the navigator.
32
+
-`history` - A list of visited items. This is an optional property and not present in all navigators. For example, it's only present in tab and drawer navigators in the core. The shape of the items in the `history` array can vary depending on the navigator. There should be at least one item present in this array.
31
33
-`stale` - A navigation state is assumed to be stale unless the `stale` property is explicitly set to `false`. This means that the state object needs to be ["rehydrated"](#partial-state-objects).
32
34
33
35
Each route object in a `routes` array may contain the following properties:
@@ -41,6 +43,7 @@ For example, a stack navigator containing a tab navigator nested inside it's hom
41
43
42
44
```js
43
45
conststate= {
46
+
type:'stack',
44
47
key:'stack-1',
45
48
routeNames: ['Home', 'Profile', 'Settings'],
46
49
routes: [
@@ -82,6 +85,7 @@ After rehydration, it'll look something like this:
82
85
83
86
```js
84
87
conststate= {
88
+
type:'stack',
85
89
key:'stack-1',
86
90
routeNames: ['Home', 'Profile', 'Settings'],
87
91
routes: [
@@ -97,4 +101,6 @@ Here, React Navigation filled in the missing bits such as keys, route names, ind
97
101
98
102
It's also possible to provide invalid data such as non-existent screens and it'll be fixed automatically. While it's not recommended to write code with invalid state objects, it can be super useful if you do things like [state persistence](state-persistence.md), where the configured screens might have changed after an update, which could cause problems if React Navigation didn't fix the state object automatically.
99
103
104
+
> If you want React Navigation to fix invalid state, you need to make sure that you don't have `stale: false` in the state object. State objects with `stale: false` are assumed to be valid state objects and React Navigation won't attempt to fix them.
105
+
100
106
When you're providing a state object in [`initialState`](navigation-container.md#initial-state), React Navigation will always assume that it's a stale state object, which makes sure that things like state persistence work smoothly without extra manipulation of the state object.
0 commit comments