Copy import { Page, ScreenBackground } from 'react-native-doorman'
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!
Copy <Page
style={{ marginTop: 100, width: '100%' }}
background={
() => <ScreenBackground color={['green', 'orange']} />
}
>
<H1>This is a beautiful page!</H1>
</Page>
Copy import React from 'react'
import {
Page,
ScreenBackground,
useDoormanUser,
H1,
Paragraph,
} from 'react-native-doorman'
import { Button } from 'react-native'
const AfterAuth = () => {
const { uid, signOut } = useDoormanUser()
return (
<Page
style={{ marginTop: 100, width: '100%' }}
background={() => <ScreenBackground color={['green', 'orange']} />}
>
<H1 style={{ color: 'white' }}>Welcome to Doorman.</H1>
<Paragraph style={{ color: 'white' }}>
Sign out below, if you want. Your user id is {uid}.
</Paragraph>
<Button title="Sign Out" color="white" onPress={signOut} />
</Page>
)
}
export default AfterAuth
Copy type Props = {
children: ReactNode
/*
Style the View that wraps content inside the Page.
*/
style?: ViewStyle
/**
* Props for the scroll view containing the whole screen. For styles, see `style`
*/
containerProps?: Omit<ComponentProps<typeof ScrollView>, 'style'>
header?: () => ReactNode
/*
Function that returns a react component. Check out Doorman's ScreenBackground!
*/
background?: () => ReactNode
disableKeyboardHandler?: boolean
footer?: () => ReactNode
}