Page
Component used by Doorman screens to wrap the entire page.
1
import { Page, ScreenBackground } from 'react-native-doorman'
Copied!

About

This component is responsible for wrapping your entire screen, and should thus wrap your entire screen. It works really well when used with the ScreenBackground component!

Usage

1
<Page
2
style={{ marginTop: 100, width: '100%' }}
3
background={
4
() => <ScreenBackground color={['green', 'orange']} />
5
}
6
>
7
<H1>This is a beautiful page!</H1>
8
</Page>
9
Copied!

Full Example

1
import React from 'react'
2
import {
3
Page,
4
ScreenBackground,
5
useDoormanUser,
6
H1,
7
Paragraph,
8
} from 'react-native-doorman'
9
import { Button } from 'react-native'
10
11
const AfterAuth = () => {
12
const { uid, signOut } = useDoormanUser()
13
return (
14
<Page
15
style={{ marginTop: 100, width: '100%' }}
16
background={() => <ScreenBackground color={['green', 'orange']} />}
17
>
18
<H1 style={{ color: 'white' }}>Welcome to Doorman.</H1>
19
<Paragraph style={{ color: 'white' }}>
20
Sign out below, if you want. Your user id is {uid}.
21
</Paragraph>
22
<Button title="Sign Out" color="white" onPress={signOut} />
23
</Page>
24
)
25
}
26
27
export default AfterAuth
28
Copied!

Props

1
type Props = {
2
children: ReactNode
3
/*
4
Style the View that wraps content inside the Page.
5
*/
6
style?: ViewStyle
7
/**
8
* Props for the scroll view containing the whole screen. For styles, see `style`
9
*/
10
containerProps?: Omit<ComponentProps<typeof ScrollView>, 'style'>
11
header?: () => ReactNode
12
/*
13
Function that returns a react component. Check out Doorman's ScreenBackground!
14
*/
15
background?: () => ReactNode
16
disableKeyboardHandler?: boolean
17
footer?: () => ReactNode
18
}
Copied!