Skip to main content
Version: 7.x

Group

A group contains several screens inside a navigator for organizational purposes. They can also be used to apply the same options such as header styles to a group of screens, or to define a common layout etc.

Groups can be defined using the groups property in the navigator configuration:

const MyStack = createNativeStackNavigator({
groups: {
App: {
screenOptions: {
headerStyle: {
backgroundColor: '#FFB6C1',
},
},
screens: {
Home: HomeScreen,
Profile: EmptyScreen,
},
},
Modal: {
screenOptions: {
presentation: 'modal',
},
screens: {
Search: EmptyScreen,
Share: EmptyScreen,
},
},
},
});
Try on Snack

The keys of the groups object (e.g. Guest, User) are used as the navigationKey for the group. You can use any string as the key.

Configuration

Screen options

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:

const MyStack = createNativeStackNavigator({
groups: {
Modal: {
screenOptions: {
presentation: 'modal',
},
screens: {
/* screens */
},
},
},
});

When you pass a function, it'll receive the route and navigation:

const MyStack = createNativeStackNavigator({
groups: {
Modal: {
screenOptions: ({ route, navigation }) => ({
title: route.params.title,
}),
screens: {
/* screens */
},
},
},
});

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.

See Options for screens for more details and examples.

Screen layout

A screen layout is a wrapper around each screen in the group. It makes it easier to provide things such as a common error boundary and suspense fallback for all screens in a group:

const MyStack = createNativeStackNavigator({
groups: {
Modal: {
screenLayout: ({ children }) => (
<ErrorBoundary>
<React.Suspense
fallback={
<View style={styles.fallback}>
<Text style={styles.text}>Loading…</Text>
</View>
}
>
{children}
</React.Suspense>
</ErrorBoundary>
),
screens: {
/* screens */
},
},
},
});

Optional key for a group of screens. 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):

The name of the group is used as the navigationKey:

const MyStack = createNativeStackNavigator({
groups: {
User: {
screens: {
/* screens */
},
},
Guest: {
screens: {
/* screens */
},
},
},
});

This means if a screen is defined in 2 groups and the groups use the if property, the screen will remount if the condition changes resulting in one group being removed and the other group being used.

This is similar to the navigationKey prop for screens, but applies to a group of screens.