Header

In order to meet the design specifications, a custom header has been implemented, which is a replacement of the header implemented by the react-navigation team. The header is supposed to used together with a set of compositional components; <HeaderTitle />, <HeaderButtonGroup /> and <HeaderLeftButton />.

Usage with React Navigation#

Replace the React Navigation header with <Header /> by setting the header property located in options.

<Stack.Navigator>
  <Stack.Screen
    name="ExampleScreen"
    component={ExampleScreen}
    options={{
      header: () => (
        <Header>
          <HeaderTitle>Example screen</HeaderTitle>
        </Header>
      ),
    }}
  />
</Stack.Navigator>

HeaderTitle#

Sets the title of the screen. Fills the entire width of the header, forcing <HeaderButtonGroup /> to the right.

<Header>
  <HeaderTitle>Example screen</HeaderTitle>
  <HeaderButtonGroup>
    <IconButton size="medium" icon={<HbBell />} />
    <IconButton size="medium" icon={<HbChat />} />
  </HeaderButtonGroup>
</Header>

HeaderLeftButton#

Used to perform actions. Can be displayed as diffferent variants; "go back" and "close". Can be used in combination with <HeaderTitle />.

<Header>
  <HeaderTitle>Example screen</HeaderTitle>
  <HeaderLeftButton variant="back" />
</Header>

HeaderButtonGroup#

Adds a button group to the header. Should be used together with <HaderTitle />. Icons should be added by using the <IconButton /> from VigorKit.

<Header>
  <HeaderTitle>Example screen</HeaderTitle>
  <HeaderButtonGroup>
    <IconButton size="medium" icon={<HbBell />} />
    <IconButton size="medium" icon={<HbChat />} />
  </HeaderButtonGroup>
</Header>

Used with modal#

When a stack navigator is configured as a modal, the header looks misplaced on iOS. This is because <Header /> uses SafeAreViewin order to position the header below the status bar of the device. When this problem occurs, you can set the disableSafeAreaView prop on the <Header />.

<StackNavigator.Screen
  name="Modal"
  component={Modal}
  options={{
    presentation: 'modal',
    header: () => (
      <Header disableSafeAreaView>
        <HeaderTitle>Title</HeaderTitle>
      </Header>
    ),
  }}
/>

Complex header example#

<Header>
  <HeaderLeftButton variant="close" />
  <HeaderTitle>Create new item</HeaderTitle>
  <HeaderButtonGroup>
    <Badge variant="dot" value={1}>
      <IconButton size="medium" icon={<Bell />} />
    </Badge>
    <IconButton size="medium" icon={<Dialog />} />
    <IconButton size="medium" icon={<Cog />} />
  </HeaderButtonGroup>
</Header>