Group

Group components are used to group 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.

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} />