Header

1
import { Header } from 'react-native-doorman'
Copied!
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:
1
<Page 
2
  header={() => <Header {...headerPropsHere} />}
3
>
4
</Page>
Copied!
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:
1
import React from 'react'
2
import { 
3
  Page, ScreenBackground, Header
4
} from 'react-native-doorman'
5
​
6
export default function ConfirmScreen() {
7
  const renderHeader = () => {
8
    return (
9
      <Header
10
        containerStyle={{
11
          backgroundColor: 'transparent',
12
          justifyContent: 'space-between',
13
          borderBottomWidth: 0,
14
        }}
15
        leftComponent={{
16
          // you can get rid of this if prop if you don't need to go back!
17
          icon: 'arrow-back',
18
          color: 'white',
19
          onPress: () => onGoBack(),
20
        }}
21
        centerComponent={{
22
          text: 'Confirm',
23
          style: {
24
            color: 'white',
25
            fontWeight: '500',
26
            fontSize: 18,
27
          },
28
        }}
29
      />
30
    )
31
  }
32
  
33
  const renderBackground = () => <ScreenBackground />
34
  
35
  return (
36
    <Page 
37
      header={renderHeader} 
38
      background={renderBackground}
39
    >
40
    </Page>
41
  )
42
}
Copied!

ScreenBackground

Input

Last modified 2yr ago

Copy link

Contents

Props

Usage

Example