import { createStackNavigator } from '@uhg-abyss/mobile';

This navigator uses the native APIs UINavigationController on iOS and Fragment on Android so that navigation built with createStackNavigator will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs.

Screen components are used to configure various aspects of screens inside a navigator.

A Screen is returned from a createStackNavigator function:

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

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

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

You need to provide at least a name and a component to render for each screen.

Options

The following options can be used to configure the screens in the navigator. These can be specified under screenOptions prop of Tab.Navigator or options prop of Tab.Screen.

title

Generic title that can be used as a fallback for headerTitle and tabBarLabel.

lazy

Whether the screen should render the first time it's accessed. Defaults to true. Set it to false if you want to render the screen on initial render.

unmountOnBlur

Whether this screen should be unmounted when navigating away from it. Unmounting a screen resets any local state in the screen as well as state of nested navigators in the screen. Defaults to false.

Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user.

freezeOnBlur

Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to false. Defaults to true when enableFreeze() from react-native-screens package is run at the top of the application.

Requires react-native-screens version >=3.16.0.

Header related options

You can find the list of header related options here. These options can be specified under screenOptions prop of Tab.navigator or options prop of Tab.Screen. You don't have to be using @react-navigation/elements directly to use these options, they are just documented in that page.

In addition to those, the following options are also supported in bottom tabs:

header

Custom header to use instead of the default header.

This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:

• navigation - The navigation object for the current screen.
• route - The route object for the current screen.
• options - The options for the current screen.

Example:

import { getHeaderTitle } from '@react-navigation/elements';

header: ({ navigation, route, options }) => {
  const title = getHeaderTitle(options, route.name);

  return <MyHeader title={title} style={options.headerStyle} />;
};

To set a custom header for all the screens in the navigator, you can specify this option in the screenOptions prop of the navigator.

headerTitle

String or React Element that returns a React Element to be used as the title of the header. Defaults to scene title

headerTitleAlign

How to align the header title. Possible values:

• left
• center

Defaults to center on iOS and left on Android.

truncateHeading

Allows the heading to be truncated. Defaults to false.

headerEyebrow

String, React Element, or function that returns a React Element to be used as the eyebrow of the header. The eyebrow is placed above the title.

headerSubtitle

String, React Element, or function that returns a React Element to be used as the subtitle of the header. The subtitle is placed below the title.

headerLeft

React Element or Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <MyButton
        {...props}
        onPress={() => {
          // Do something
        }}
      />
    ),
  }}
/>

headerRight

Function which returns a React Element to display on the right side of the header.

headerContent

Content of the header placed at the bottom of the header.

headerStyle

Style object for the header. You can specify a custom background color here, for example.

headerTitleStyle

Styles for the title component.

headerLeftContainerStyle

Customize the style for the container of the headerLeft component, for example to add padding.

headerRightContainerStyle

Customize the style for the container of the headerRight component, for example to add padding.

headerTitleContainerStyle

Customize the style for the container of the headerTitle element.

headerBackgroundContainerStyle

Customize the style for the container of the headerBackground element.

headerTintColor

Tint color for the header

headerTransparent

Defaults to false. If true, the header will not have a background unless you explicitly provide it with headerBackground. The header will also float over the screen so that it overlaps the content underneath.

This is useful if you want to render a semi-transparent header or a blurred background.

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

headerBackground

Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient.

For example, you can use this with headerTransparent to render a blur view to create a translucent header.

headerShown

Whether to show or hide the header for the screen. The header is shown by default. Setting this to false hides the header.

headerCenter

Place content in the center of the app bar. Overrides heading, subheading, and headerEyebrow components.

Group

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

A Group is returned from a createStackNavigator 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.

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

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