Skip to content

Commit e93be02

Browse files
patrycjakalinskapatrycjakalinska
authored
Migrate 'Groups' examples to static API in v7 (#1319)
1 parent c245e7a commit e93be02

File tree

1 file changed

+203
-14
lines changed

1 file changed

+203
-14
lines changed

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

Lines changed: 203 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,156 @@ title: Group
44
sidebar_label: Group
55
---
66

7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
710
`Group` components are used to group several [screens](screen.md) inside a navigator.
811

912
A `Group` is returned from a `createXNavigator` function:
1013

14+
<Tabs groupId="config" queryString="config">
15+
<TabItem value="static" label="Static" default>
16+
17+
```js
18+
const Stack = createStackNavigator({
19+
screens: {
20+
/* content */
21+
},
22+
groups: {
23+
/* content */
24+
},
25+
}); // Stack contains Screen & Navigator properties
26+
```
27+
28+
</TabItem>
29+
<TabItem value="dynamic" label="Dynamic" default>
30+
1131
```js
1232
const Stack = createStackNavigator(); // Stack contains Screen & Navigator properties
1333
```
1434

35+
</TabItem>
36+
</Tabs>
37+
1538
After creating the navigator, it can be used as children of the `Navigator` component:
1639

17-
<samp id="api-group"/>
40+
<Tabs groupId="config" queryString="config">
41+
<TabItem value="static" label="Static" default>
1842

19-
```js
20-
<Stack.Navigator>
21-
<Stack.Group
22-
screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
23-
>
24-
<Stack.Screen name="Home" component={HomeScreen} />
25-
<Stack.Screen name="Profile" component={ProfileScreen} />
26-
</Stack.Group>
27-
<Stack.Group screenOptions={{ presentation: 'modal' }}>
28-
<Stack.Screen name="Search" component={SearchScreen} />
29-
<Stack.Screen name="Share" component={ShareScreen} />
30-
</Stack.Group>
31-
</Stack.Navigator>
43+
```js name="Stack groups" snack version=7 dependencies=@react-navigation/elements
44+
import * as React from 'react';
45+
import { View, Text } from 'react-native';
46+
import { Button } from '@react-navigation/elements';
47+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
48+
import {
49+
createStaticNavigation,
50+
useNavigation,
51+
} from '@react-navigation/native';
52+
53+
function HomeScreen() {
54+
const navigation = useNavigation();
55+
56+
return (
57+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
58+
<Text>Home Screen</Text>
59+
<Button onPress={() => navigation.navigate('Search')}>
60+
Go to Search
61+
</Button>
62+
</View>
63+
);
64+
}
65+
66+
function EmptyScreen() {
67+
return <View />;
68+
}
69+
70+
// codeblock-focus-start
71+
const Stack = createNativeStackNavigator({
72+
screens: {},
73+
groups: {
74+
App: {
75+
screenOptions: {
76+
headerStyle: {
77+
backgroundColor: '#FFB6C1',
78+
},
79+
},
80+
screens: {
81+
Home: HomeScreen,
82+
Profile: EmptyScreen,
83+
},
84+
},
85+
Modal: {
86+
screenOptions: {
87+
presentation: 'modal',
88+
},
89+
screens: {
90+
Search: EmptyScreen,
91+
Share: EmptyScreen,
92+
},
93+
},
94+
},
95+
});
96+
// codeblock-focus-end
97+
98+
const Navigation = createStaticNavigation(Stack);
99+
100+
export default function App() {
101+
return <Navigation />;
102+
}
32103
```
33104

105+
</TabItem>
106+
<TabItem value="dynamic" label="Dynamic" default>
107+
108+
```js name="Stack groups" snack version=7 dependencies=@react-navigation/elements
109+
import * as React from 'react';
110+
import { View, Text } from 'react-native';
111+
import { Button } from '@react-navigation/elements';
112+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
113+
import { NavigationContainer } from '@react-navigation/native';
114+
115+
const Stack = createNativeStackNavigator();
116+
117+
function HomeScreen({ navigation }) {
118+
return (
119+
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
120+
<Text>Home Screen</Text>
121+
<Button onPress={() => navigation.navigate('Search')}>
122+
Go to Search
123+
</Button>
124+
</View>
125+
);
126+
}
127+
128+
function EmptyScreen() {
129+
return <View />;
130+
}
131+
132+
export default function App() {
133+
return (
134+
<NavigationContainer>
135+
// codeblock-focus-start
136+
<Stack.Navigator>
137+
<Stack.Group
138+
screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
139+
>
140+
<Stack.Screen name="Home" component={HomeScreen} />
141+
<Stack.Screen name="Profile" component={EmptyScreen} />
142+
</Stack.Group>
143+
<Stack.Group screenOptions={{ presentation: 'modal' }}>
144+
<Stack.Screen name="Search" component={EmptyScreen} />
145+
<Stack.Screen name="Share" component={EmptyScreen} />
146+
</Stack.Group>
147+
</Stack.Navigator>
148+
// codeblock-focus-end
149+
</NavigationContainer>
150+
);
151+
}
152+
```
153+
154+
</TabItem>
155+
</Tabs>
156+
34157
It's also possible to nest `Group` components inside other `Group` components.
35158

36159
## Props
@@ -39,6 +162,26 @@ It's also possible to nest `Group` components inside other `Group` components.
39162

40163
Options to configure how the screens inside the group get presented in the navigator. It accepts either an object or a function returning an object:
41164

165+
<Tabs groupId="config" queryString="config">
166+
<TabItem value="static" label="Static" default>
167+
168+
```js
169+
const Stack = createNativeStackNavigator({
170+
screens: {},
171+
groups: {
172+
screenOptions: {
173+
presentation: 'modal',
174+
},
175+
screens: {
176+
/* screens */
177+
},
178+
},
179+
});
180+
```
181+
182+
</TabItem>
183+
<TabItem value="dynamic" label="Dynamic" default>
184+
42185
```js
43186
<Stack.Group
44187
screenOptions={{
@@ -49,8 +192,31 @@ Options to configure how the screens inside the group get presented in the navig
49192
</Stack.Group>
50193
```
51194

195+
</TabItem>
196+
</Tabs>
197+
52198
When you pass a function, it'll receive the [`route`](route-object.md) and [`navigation`](navigation-object.md):
53199

200+
<Tabs groupId="config" queryString="config">
201+
<TabItem value="static" label="Static" default>
202+
203+
```js
204+
const Stack = createNativeStackNavigator({
205+
screens: {},
206+
groups: {
207+
screenOptions: ({ route, navigation }) => ({
208+
title: route.params.title,
209+
}),
210+
screens: {
211+
/* screens */
212+
},
213+
},
214+
});
215+
```
216+
217+
</TabItem>
218+
<TabItem value="dynamic" label="Dynamic" default>
219+
54220
```js
55221
<Stack.Group
56222
screenOptions={({ route, navigation }) => ({
@@ -61,18 +227,41 @@ When you pass a function, it'll receive the [`route`](route-object.md) and [`nav
61227
</Stack.Group>
62228
```
63229

230+
</TabItem>
231+
</Tabs>
232+
64233
These options are merged with the `options` specified in the individual screens, and the screen's options will take precedence over the group's options.
65234

66235
See [Options for screens](screen-options.md) for more details and examples.
67236

68237
### `navigationKey`
69238

70239
Optional key for a group of screens screen. If the key changes, all existing screens in this group will be removed (if used in a stack navigator) or reset (if used in a tab or drawer navigator):
240+
<Tabs groupId="config" queryString="config">
241+
<TabItem value="static" label="Static" default>
242+
243+
```js
244+
const Stack = createNativeStackNavigator({
245+
screens: {},
246+
groups: {
247+
navigationKey: isSignedIn ? 'user' : 'guest',
248+
screens: {
249+
/* screens */
250+
},
251+
},
252+
});
253+
```
254+
255+
</TabItem>
256+
<TabItem value="dynamic" label="Dynamic" default>
71257

72258
```js
73259
<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
74260
{/* screens */}
75261
</Stack.Group>
76262
```
77263

264+
</TabItem>
265+
</Tabs>
266+
78267
This is similar to the [`navigationKey`](screen.md#navigationkey) prop on `Screen`, but applies to a group of screens.

0 commit comments

Comments
 (0)