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!
Copy link