Skip to main content
Version: 7.x

Group

Group components are used to group several screens inside a navigator.

A Group is returned from a createXNavigator function:

const Stack = createStackNavigator(); // Stack contains Screen & Navigator properties

After creating the navigator, it can be used as children of the Navigator component:

<Stack.Navigator>
  <Stack.Group
    screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Search" component={SearchScreen} />
    <Stack.Screen name="Share" component={ShareScreen} />
  </Stack.Group>
</Stack.Navigator>

It's also possible to nest Group components inside other Group components.

Props​

screenOptions​

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:

<Stack.Group
  screenOptions={{
    presentation: 'modal',
  }}
>
  {/* screens */}
</Stack.Group>

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

<Stack.Group
  screenOptions={({ route, navigation }) => ({
    title: route.params.title,
  })}
>
  {/* screens */}
</Stack.Group>

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.

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):

<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
  {/* screens */}
</Stack.Group>

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