Static configuration

The bulk of the static configuration is done using the createXNavigator functions, e.g. createNativeStackNavigator, createBottomTabNavigator, createDrawerNavigator etc. We'll refer to these functions as createXNavigator in the rest of this guide.

createXNavigator

The createXNavigator functions take one argument, which is an object with the following properties:

• Same props as the navigator component, e.g. id, initialRouteName, screenOptions etc. See Navigator as well as the docs for each navigator for more details on the props they accept.
• screens - an object containing configuration for each screen in the navigator.
• groups - an optional object containing groups of screens (equivalent to Group in the dynamic API).

For example:

const RootStack = createNativeStackNavigator({
  initialRouteName: 'Home',
  screenOptions: {
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: 'tomato',
    },
  },
  screens: {
    Home: HomeScreen,
    Profile: ProfileScreen,
  },
});

screens

The screens object can contain key value pairs where the key is the name of the screen and the value can be several things:

• A component to render:

  const RootStack = createNativeStackNavigator({
    screens: {
      Home: HomeScreen,
    },
  });

• A navigator configured using createXNavigator for nested navigators:

  const HomeTabs = createBottomTabNavigator({
    screens: {
      Groups: GroupsScreen,
      Chats: ChatsScreen,
    },
  });
  
  const RootStack = createNativeStackNavigator({
    screens: {
      Home: HomeTabs,
    },
  });

• An object containing configuration for the screen. This configuration contains the various properties:

  const RootStack = createNativeStackNavigator({
    screens: {
      Home: {
        screen: HomeScreen,
        linking: {
          path: 'home',
        },
      },
    },
  });

  See Screen configuration for more details.

groups

The groups object can contain key-value pairs where the key is the name of the group and the value is the group configuration.

The configuration object for a group accepts the properties described in the Group page. In addition, the following properties are available when using static configuration:

• if - this can be used to conditionally render the group and works the same as the if property in the screen configuration.
• screens - an object containing configuration for each screen in the group. The configuration is the same as the screens object in the navigator configuration.

Example:

const RootStack = createNativeStackNavigator({
  screens: {