Group

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

A Group is returned from a createXNavigator function:

Static

const Stack = createStackNavigator({
  screens: {
    /* content */
  },
  groups: {
    /* content */
  },
}); // Stack contains Screen & Navigator properties

Dynamic

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

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

Static

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

Try this example on Snack

Dynamic

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

Try this example on Snack

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:

Static

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

Dynamic

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

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

Static

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

Dynamic

<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.

navigationKey

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

Static

const Stack = createNativeStackNavigator({
  screens: {},
  groups: {
    navigationKey: isSignedIn ? 'user' : 'guest',
    screens: {
      /* screens */
    },
  },
});

Dynamic

<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.