Skip to content

Commit 088736b

Browse files
docs: use native-stack in nesting-navigators
1 parent 8ea6404 commit 088736b

File tree

2 files changed

+18
-18
lines changed

2 files changed

+18
-18
lines changed

static/examples/6.x/nest-navigators.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Button, View, Text } from 'react-native';
33
import { NavigationContainer } from '@react-navigation/native';
4-
import { createStackNavigator } from '@react-navigation/stack';
4+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
55
import { createDrawerNavigator } from '@react-navigation/drawer';
66

77
function SettingsScreen({ route, navigation }) {
@@ -44,7 +44,7 @@ function HomeScreen({ navigation }) {
4444
}
4545

4646
const Drawer = createDrawerNavigator();
47-
const Stack = createStackNavigator();
47+
const Stack = createNativeStackNavigator();
4848

4949
function Root() {
5050
return (

versioned_docs/version-6.x/nesting-navigators.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function App() {
3333
}
3434
```
3535

36-
In the above example, the `Home` component contains a tab navigator. The `Home` component is also used for the `Home` screen in your stack navigator inside the `App` component. So here, a tab navigator is nested inside a stack navigator:
36+
In the above example, the `Home` component contains a tab navigator. The `Home` component is also used for the `Home` screen in your native stack navigator inside the `App` component. So here, a tab navigator is nested inside a native stack navigator:
3737

3838
- `Stack.Navigator`
3939
- `Home` (`Tab.Navigator`)
@@ -50,13 +50,13 @@ When nesting navigators, there are some things to keep in mind:
5050

5151
### Each navigator keeps its own navigation history
5252

53-
For example, when you press the back button when inside a screen in a nested stack navigator, it'll go back to the previous screen inside the nested stack even if there's another navigator as the parent.
53+
For example, when you press the back button when inside a screen in a nested native stack navigator, it'll go back to the previous screen inside the nested stack even if there's another navigator as the parent.
5454

5555
### Each navigator has its own options
5656

5757
For example, specifying a `title` option in a screen nested in a child navigator won't affect the title shown in a parent navigator.
5858

59-
If you want to achieve this behavior, see the guide for [screen options with nested navigators](screen-options-resolution.md#setting-parent-screen-options-based-on-child-navigators-state). this could be useful if you are rendering a tab navigator inside a stack navigator and want to show the title of the active screen inside the tab navigator in the header of the stack navigator.
59+
If you want to achieve this behavior, see the guide for [screen options with nested navigators](screen-options-resolution.md#setting-parent-screen-options-based-on-child-navigators-state). This could be useful if you are rendering a tab navigator inside a native stack navigator and want to show the title of the active screen inside the tab navigator in the header of the native stack navigator.
6060

6161
### Each screen in a navigator has its own params
6262

@@ -70,9 +70,9 @@ For example, if you're calling `navigation.goBack()` in a nested screen, it'll o
7070

7171
### Navigator specific methods are available in the navigators nested inside
7272

73-
For example, if you have a stack inside a drawer navigator, the drawer's `openDrawer`, `closeDrawer`, `toggleDrawer` methods etc. will also be available on the `navigation` prop in the screen's inside the stack navigator. But say you have a stack navigator as the parent of the drawer, then the screens inside the stack navigator won't have access to these methods, because they aren't nested inside the drawer.
73+
For example, if you have a stack inside a drawer navigator, the drawer's `openDrawer`, `closeDrawer`, `toggleDrawer` methods etc. will also be available on the `navigation` prop in the screen's inside the native stack navigator. But say you have a native stack navigator as the parent of the drawer, then the screens inside the native stack navigator won't have access to these methods, because they aren't nested inside the drawer.
7474

75-
Similarly, if you have a tab navigator inside stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` prop.
75+
Similarly, if you have a tab navigator inside a native stack navigator, the screens in the tab navigator will get the `push` and `replace` methods for stack in their `navigation` prop.
7676

7777
If you need to dispatch actions to the nested child navigators from a parent, you can use [`navigation.dispatch`](navigation-prop.md#dispatch):
7878

@@ -82,7 +82,7 @@ navigation.dispatch(DrawerActions.toggleDrawer());
8282

8383
### Nested navigators don't receive parent's events
8484

85-
For example, if you have a stack navigator nested inside a tab navigator, the screens in the stack navigator won't receive the events emitted by the parent tab navigator such as (`tabPress`) when using `navigation.addListener`.
85+
For example, if you have a native stack navigator nested inside a tab navigator, the screens in the native stack navigator won't receive the events emitted by the parent tab navigator such as (`tabPress`) when using `navigation.addListener`.
8686

8787
To receive events from parent navigator, you can explicitly listen to parent's events with `navigation.getParent()`:
8888

@@ -94,14 +94,14 @@ const unsubscribe = navigation.getParent().addListener('tabPress', (e) => {
9494

9595
### Parent navigator's UI is rendered on top of child navigator
9696

97-
For example, when you nest a stack navigator inside a drawer navigator, you'll see that the drawer appears above the stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header of the stack. This is an important point to consider when deciding how to nest your navigators.
97+
For example, when you nest a native stack navigator inside a drawer navigator, you'll see that the drawer appears above the native stack navigator's header. However, if you nest the drawer navigator inside a stack, the drawer will appear below the header of the stack. This is an important point to consider when deciding how to nest your navigators.
9898

9999
In your app, you will probably use these patterns depending on the behavior you want:
100100

101-
- Tab navigator nested inside the initial screen of stack navigator - New screens cover the tab bar when you push them.
102-
- Drawer navigator nested inside the initial screen of stack navigator with the initial screen's stack header hidden - The drawer can only be opened from the first screen of the stack.
103-
- Stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack.
104-
- Stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top.
101+
- Tab navigator nested inside the initial screen of native stack navigator - New screens cover the tab bar when you push them.
102+
- Drawer navigator nested inside the initial screen of native stack navigator with the initial screen's stack header hidden - The drawer can only be opened from the first screen of the stack.
103+
- Native stack navigators nested inside each screen of drawer navigator - The drawer appears over the header from the stack.
104+
- Native stack navigators nested inside each screen of tab navigator - The tab bar is always visible. Usually pressing the tab again also pops the stack to top.
105105

106106
## Navigating to a screen in a nested navigator
107107

@@ -165,7 +165,7 @@ navigation.navigate('Root', {
165165
});
166166
```
167167

168-
If the navigator was already rendered, navigating to another screen will push a new screen in case of stack navigator.
168+
If the navigator was already rendered, navigating to another screen will push a new screen in the case of the native stack navigator.
169169

170170
You can follow similar approach for deeply nested screens. Note that the second argument to `navigate` here is just `params`, so you can do something like:
171171

@@ -185,7 +185,7 @@ In the above case, you're navigating to the `Media` screen, which is in a naviga
185185

186186
### Rendering initial route defined in the navigator
187187

188-
By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored. This behaviour is different from the React Navigation 4.
188+
By default, when you navigate a screen in the nested navigator, the specified screen is used as the initial screen and the initial route prop on the navigator is ignored.
189189

190190
If you need to render the initial route specified in the navigator, you can disable the behaviour of using the specified screen as the initial screen by setting `initial: false`:
191191

@@ -200,9 +200,9 @@ This affects what happens when pressing the back button. When there's an initial
200200

201201
## Nesting multiple navigators
202202

203-
It's sometimes useful to nest multiple navigators such as stack or drawer, for example, to have [some screens in a modal stack and some in regular stack](modal.md).
203+
It's sometimes useful to nest multiple navigators such as native stack or drawer, for example, to have [some screens in a modal stack and some in regular stack](modal.md).
204204

205-
When nesting multiple stack, drawer or bottom tab navigator, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the stack navigator.
205+
When nesting multiple stack, drawer or bottom tab navigators, headers from both child and parent navigators would be shown. However, usually it's more desirable to show the header in the child navigator and hide the header in the native stack navigator.
206206

207207
To achieve this, you can hide the header in the screen containing the navigator using the `headerShown: false` option.
208208

@@ -236,7 +236,7 @@ function App() {
236236

237237
A complete example can be found in the [modal guide](modal.md). However, the principle isn't only specific to modals, but any kind of nesting of navigators.
238238

239-
In these examples, we have used a stack navigator directly nested inside another stack navigator, but the same principle applies when there are other navigators in the middle, for example: stack navigator inside a tab navigator which is inside another stack navigator, stack navigator inside drawer navigator etc.
239+
In these examples, we have used a native stack navigator directly nested inside another native stack navigator, but the same principle applies when there are other navigators in the middle, for example: native stack navigator inside a tab navigator which is inside another native stack navigator, native stack navigator inside drawer navigator etc.
240240

241241
When nesting multiple stack navigators, we recommend nesting at most 2 stack navigators, unless absolutely necessary.
242242

0 commit comments

Comments
 (0)