Header

import { Header } from 'react-native-doorman'

Props

We use the awesome Header component from react-native-elements, so feel free to check out their docs on how to use it / what props are available.

Usage

We recommend using the Header component with Doorman's Page component, like this:

<Page 
  header={() => <Header {...headerPropsHere} />}
>
</Page>

See the full example below to get more context! Make sure to check out the Page component too.

Example

Below is a simplified code sample of how we use the Header component on the AuthFlow.ConfirmScreen. It will output something that looks like this:

import React from 'react'
import { 
  Page, ScreenBackground, Header
} from 'react-native-doorman'

export default function ConfirmScreen() {
  const renderHeader = () => {
    return (
      <Header
        containerStyle={{
          backgroundColor: 'transparent',
          justifyContent: 'space-between',
          borderBottomWidth: 0,
        }}
        leftComponent={{
          // you can get rid of this if prop if you don't need to go back!
          icon: 'arrow-back',
          color: 'white',
          onPress: () => onGoBack(),
        }}
        centerComponent={{
          text: 'Confirm',
          style: {
            color: 'white',
            fontWeight: '500',
            fontSize: 18,
          },
        }}
      />
    )
  }
  
  const renderBackground = () => <ScreenBackground />
  
  return (
    <Page 
      header={renderHeader} 
      background={renderBackground}
    >
    </Page>
  )
}