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
// add other navigation functions that you need and export them
40
42
```
41
43
42
-
Then, in any of your javascript modules, just import the `RootNavigation` and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works just as well when used from within them.
44
+
Then, in any of your javascript modules, import the `RootNavigation` and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works as well when used from within them.
43
45
44
46
<sampid="no-nav-prop" />
45
47
@@ -57,8 +59,12 @@ Apart from `navigate`, you can add other navigation actions:
@@ -73,60 +79,28 @@ When using this pattern, you need to keep few things in mind to avoid crashes in
73
79
- The ref is set only after the navigation container renders, this can be async when handling deep links
74
80
- A navigator needs to be rendered to be able to handle actions
75
81
76
-
If you try to navigate without rendering a navigator or before the navigator finishes mounting, it will throw and crash your app if not handled. So you'll need to add an additional check to decide what to do until your app mounts.
82
+
If you try to navigate without rendering a navigator or before the navigator finishes mounting, it will print an error and do nothing. So you'll need to add an additional check to decide what to do until your app mounts.
77
83
78
84
For an example, consider the following scenario, you have a screen somewhere in the app, and that screen dispatches a redux action on `useEffect`/`componentDidMount`. You are listening for this action in your middleware and try to perform navigation when you get it. This will throw an error, because by this time, the parent navigator hasn't finished mounting and isn't ready. Parent's `useEffect`/`componentDidMount` is always called **after** child's `useEffect`/`componentDidMount`.
79
85
80
-
To avoid this, you can set a ref to tell you that your app has finished mounting, and check that ref before performing any navigation. To do this, we can use the `onReady` callback in our `NavigationContainer`:
// Perform navigation if the react navigation is ready to handle actions
98
+
navigationRef.navigate(name, params);
123
99
} else {
124
-
// You can decide what to do if the app hasn't mounted
100
+
// You can decide what to do if react navigation is not ready
125
101
// You can ignore this, or add these actions to a queue you can call later
126
102
}
127
103
}
128
104
```
129
105
130
-
Note that this only handles the case when you're dispatching actions before the container finishes mounting. You'll still have an error if you are not rendering any navigators. A navigator must be rendered to be able to dispatch actions.
131
-
132
106
If you're unsure if a navigator is rendered, you can call `navigationRef.current.getRootState()`, and it'll return a valid state object if any navigators are rendered, otherwise it will return `undefined`.
Keep in mind that the ref may be initially `null` in some situations (such as when linking is enabled). To make sure that the ref is initialized, you can use the [`onReady`](#onready) callback to get notified when the navigation container finishes mounting.
57
+
If you're using a regular ref object, keep in mind that the ref may be initially `null` in some situations (such as when linking is enabled). To make sure that the ref is initialized, you can use the [`onReady`](#onready) callback to get notified when the navigation container finishes mounting.
56
58
57
59
### Methods on the ref
58
60
@@ -61,7 +63,7 @@ The ref object includes all of the common navigation methods such as `navigate`,
61
63
Example:
62
64
63
65
```js
64
-
navigationRef.current?.navigate(name, params);
66
+
navigationRef.navigate(name, params);
65
67
```
66
68
67
69
All of these methods will act as if they were called inside the currently focused screen. It's important note that there must be a navigator rendered to handle these actions.
@@ -73,7 +75,7 @@ In addition to these methods, the ref object also includes the following special
73
75
The `resetRoot` method lets you reset the state of the navigation tree to the specified state object:
74
76
75
77
```js
76
-
navigationRef.current?.resetRoot({
78
+
navigationRef.resetRoot({
77
79
index:0,
78
80
routes: [{ name:'Profile' }],
79
81
});
@@ -86,7 +88,7 @@ Unlike the `reset` method, this acts on the root navigator instead of navigator
86
88
The `getRootState` method returns a [navigation state](navigation-state.md) object containing the navigation states for all navigators in the navigation tree:
87
89
88
90
```js
89
-
conststate=navigationRef.current?.getRootState();
91
+
conststate=navigationRef.getRootState();
90
92
```
91
93
92
94
Note that the returned `state` object will be `undefined` if there are no navigators currently rendered.
@@ -96,7 +98,7 @@ Note that the returned `state` object will be `undefined` if there are no naviga
96
98
The `getCurrentRoute` method returns the route object for the currently focused screen in the whole navigation tree:
0 commit comments