Skip to content

Commit fadf41c

Browse files
satya164satya164
committed
Add a page for navigator
1 parent 84f8329 commit fadf41c

9 files changed

+172
-70
lines changed

‎versioned_docs/version-7.x/bottom-tab-navigator.md

+1-13
Original file line numberDiff line numberDiff line change
@@ -146,19 +146,7 @@ For a complete usage guide see [Tab Navigation](tab-based-navigation.md).
146146

147147
### Props
148148

149-
The `Tab.Navigator` component accepts following props:
150-
151-
#### `id`
152-
153-
Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
154-
155-
#### `initialRouteName`
156-
157-
The name of the route to render on first load of the navigator.
158-
159-
#### `screenOptions`
160-
161-
Default options to use for the screens in the navigator.
149+
In addition to the [common props](navigator.md#configuration) shared by all navigators, the bottom tab navigator accepts the following additional props:
162150

163151
#### `backBehavior`
164152

‎versioned_docs/version-7.x/drawer-navigator.md

+1-13
Original file line numberDiff line numberDiff line change
@@ -184,19 +184,7 @@ For a complete usage guide see [Drawer Navigation](drawer-based-navigation.md).
184184

185185
### Props
186186

187-
The `Drawer.Navigator` component accepts following props:
188-
189-
#### `id`
190-
191-
Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
192-
193-
#### `initialRouteName`
194-
195-
The name of the route to render on the first load of the navigator.
196-
197-
#### `screenOptions`
198-
199-
Default options to use for the screens in the navigator.
187+
In addition to the [common props](navigator.md#configuration) shared by all navigators, the drawer navigator component accepts the following additional props:
200188

201189
#### `backBehavior`
202190

‎versioned_docs/version-7.x/group.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function EmptyScreen() {
4242
}
4343

4444
// codeblock-focus-start
45-
const Stack = createNativeStackNavigator({
45+
const MyStack = createNativeStackNavigator({
4646
groups: {
4747
App: {
4848
screenOptions: {
@@ -145,7 +145,7 @@ Options to configure how the screens inside the group get presented in the navig
145145
<TabItem value="static" label="Static" default>
146146

147147
```js
148-
const Stack = createNativeStackNavigator({
148+
const MyStack = createNativeStackNavigator({
149149
groups: {
150150
Modal: {
151151
screenOptions: {
@@ -181,7 +181,7 @@ When you pass a function, it'll receive the [`route`](route-object.md) and [`nav
181181
<TabItem value="static" label="Static" default>
182182

183183
```js
184-
const Stack = createNativeStackNavigator({
184+
const MyStack = createNativeStackNavigator({
185185
groups: {
186186
Modal: {
187187
screenOptions: ({ route, navigation }) => ({
@@ -225,7 +225,7 @@ Optional key for a group of screens. If the key changes, all existing screens in
225225
The name of the group is used as the `navigationKey`:
226226

227227
```js
228-
const Stack = createNativeStackNavigator({
228+
const MyStack = createNativeStackNavigator({
229229
groups: {
230230
User: {
231231
screens: {

‎versioned_docs/version-7.x/material-top-tab-navigator.md

+1-13
Original file line numberDiff line numberDiff line change
@@ -162,19 +162,7 @@ export default function App() {
162162

163163
### Props
164164

165-
The `Tab.Navigator` component accepts following props:
166-
167-
#### `id`
168-
169-
Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
170-
171-
#### `initialRouteName`
172-
173-
The name of the route to render on first load of the navigator.
174-
175-
#### `screenOptions`
176-
177-
Default options to use for the screens in the navigator.
165+
In addition to the [common props](navigator.md#configuration) shared by all navigators, the material top tabs navigator component accepts the following additional props:
178166

179167
#### `backBehavior`
180168

‎versioned_docs/version-7.x/native-stack-navigator.md

+1-13
Original file line numberDiff line numberDiff line change
@@ -148,19 +148,7 @@ If you encounter any bugs while using `createNativeStackNavigator`, please open
148148

149149
### Props
150150

151-
The `Stack.Navigator` component accepts following props:
152-
153-
#### `id`
154-
155-
Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
156-
157-
#### `initialRouteName`
158-
159-
The name of the route to render on first load of the navigator.
160-
161-
#### `screenOptions`
162-
163-
Default options to use for the screens in the navigator.
151+
The native stack navigator accepts the [common props](navigator.md#configuration) shared by all navigators.
164152

165153
### Options
166154

‎versioned_docs/version-7.x/navigator.md

+161
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
---
2+
id: navigator
3+
title: Navigator
4+
sidebar_label: Navigator
5+
---
6+
7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
10+
A navigator is responsible for managing and rendering a set of screens. It can be created using the `createXNavigator` functions, e.g. [`createStackNavigator`](stack-navigator.md), [`createNativeStackNavigator`](native-stack-navigator.md), [`createBottomTabNavigator`](bottom-tab-navigator.md), [`createMaterialTopTabNavigator`](material-top-tab-navigator.md), [`createDrawerNavigator`](drawer-navigator.md) etc.:
11+
12+
<Tabs groupId="config" queryString="config">
13+
<TabItem value="static" label="Static" default>
14+
15+
```js
16+
const MyStack = createNativeStackNavigator({
17+
screens: {
18+
Home: HomeScreen,
19+
Profile: ProfileScreen,
20+
},
21+
});
22+
```
23+
24+
</TabItem>
25+
<TabItem value="dynamic" label="Dynamic">
26+
27+
```js
28+
const Stack = createNativeStackNavigator();
29+
30+
function MyStack() {
31+
return (
32+
<Stack.Navigator>
33+
<Stack.Screen name="Home" component={HomeScreen} />
34+
<Stack.Screen name="Profile" component={ProfileScreen} />
35+
</Stack.Navigator>
36+
);
37+
}
38+
```
39+
40+
</TabItem>
41+
</Tabs>
42+
43+
In addition to the built-in navigators, it's also possible to build your custom navigators or use third-party navigators. See [custom navigators](custom-navigators.md) for more details.
44+
45+
## Configuration
46+
47+
Different navigators accept different configuration options. You can find the list of options for each navigator in their respective documentation.
48+
49+
There is a set of common configurations that are shared across all navigators:
50+
51+
### ID
52+
53+
Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
54+
55+
<Tabs groupId="config" queryString="config">
56+
<TabItem value="static" label="Static" default>
57+
58+
```js
59+
const MyStack = createNativeStackNavigator({
60+
id: 'RootStack',
61+
screens: {
62+
Home: HomeScreen,
63+
Profile: ProfileScreen,
64+
},
65+
});
66+
```
67+
68+
</TabItem>
69+
<TabItem value="dynamic" label="Dynamic">
70+
71+
```js
72+
const Stack = createNativeStackNavigator();
73+
74+
function MyStack() {
75+
return (
76+
<Stack.Navigator id="RootStack">
77+
<Stack.Screen name="Home" component={HomeScreen} />
78+
<Stack.Screen name="Profile" component={ProfileScreen} />
79+
</Stack.Navigator>
80+
);
81+
}
82+
```
83+
84+
</TabItem>
85+
</Tabs>
86+
87+
### Initial route name
88+
89+
The name of the route to render on the first load of the navigator.
90+
91+
<Tabs groupId="config" queryString="config">
92+
<TabItem value="static" label="Static" default>
93+
94+
```js
95+
const MyStack = createNativeStackNavigator({
96+
initialRouteName: 'Home',
97+
screens: {
98+
Home: HomeScreen,
99+
Profile: ProfileScreen,
100+
},
101+
});
102+
```
103+
104+
</TabItem>
105+
<TabItem value="dynamic" label="Dynamic">
106+
107+
```js
108+
const Stack = createNativeStackNavigator();
109+
110+
function MyStack() {
111+
return (
112+
<Stack.Navigator initialRouteName="Home">
113+
<Stack.Screen name="Home" component={HomeScreen} />
114+
<Stack.Screen name="Profile" component={ProfileScreen} />
115+
</Stack.Navigator>
116+
);
117+
}
118+
```
119+
120+
</TabItem>
121+
</Tabs>
122+
123+
### Screen options
124+
125+
Default options to use for all the screens in the navigator. It accepts either an object or a function returning an object:
126+
127+
<Tabs groupId="config" queryString="config">
128+
<TabItem value="static" label="Static" default>
129+
130+
```js
131+
const MyStack = createNativeStackNavigator({
132+
screenOptions: {
133+
headerShown: false,
134+
},
135+
screens: {
136+
Home: HomeScreen,
137+
Profile: ProfileScreen,
138+
},
139+
});
140+
```
141+
142+
</TabItem>
143+
<TabItem value="dynamic" label="Dynamic">
144+
145+
```js
146+
const Stack = createNativeStackNavigator();
147+
148+
function MyStack() {
149+
return (
150+
<Stack.Navigator screenOptions={{ headerShown: false }}>
151+
<Stack.Screen name="Home" component={HomeScreen} />
152+
<Stack.Screen name="Profile" component={ProfileScreen} />
153+
</Stack.Navigator>
154+
);
155+
}
156+
```
157+
158+
</TabItem>
159+
</Tabs>
160+
161+
See [Options for screens](screen-options.md) for more details and examples.

‎versioned_docs/version-7.x/stack-navigator.md

+1-13
Original file line numberDiff line numberDiff line change
@@ -190,19 +190,7 @@ export default function App() {
190190

191191
### Props
192192

193-
The `Stack.Navigator` component accepts following props:
194-
195-
#### `id`
196-
197-
Optional unique ID for the navigator. This can be used with [`navigation.getParent`](navigation-object.md#getparent) to refer to this navigator in a child navigator.
198-
199-
#### `initialRouteName`
200-
201-
The name of the route to render on first load of the navigator.
202-
203-
#### `screenOptions`
204-
205-
Default options to use for the screens in the navigator.
193+
In addition to the [common props](navigator.md#configuration) shared by all navigators, the stack navigator accepts the following additional props:
206194

207195
#### `detachInactiveScreens`
208196

‎versioned_docs/version-7.x/static-configuration.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ The bulk of the static configuration is done using the `createXNavigator` functi
1010

1111
The `createXNavigator` functions take one argument, which is an object with the following properties:
1212

13-
- Same props as the navigator component, e.g. `id`, `initialRouteName`, `screenOptions` etc. See the docs for each navigator for more details on the props they accept.
13+
- Same props as the navigator component, e.g. `id`, `initialRouteName`, `screenOptions` etc. See [Navigator](navigator.md) as well as the docs for each navigator for more details on the props they accept.
1414
- `screens` - an object containing configuration for each screen in the navigator.
1515
- `groups` - an optional object containing groups of screens (equivalent to [`Group`](group.md) in the dynamic API).
1616

‎versioned_sidebars/version-7.x-sidebars.json

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
"static-configuration",
5454
"navigation-container",
5555
"server-container",
56+
"navigator",
5657
"group",
5758
"screen",
5859
"screen-options",

0 commit comments

Comments
 (0)