This component is responsible for wrapping your entire screen, and should thus wrap your entire screen. It works really well when used with the component!
Component used by Doorman screens to wrap the entire page.
<Pagestyle={{ marginTop:100, width:'100%' }}background={ () => <ScreenBackgroundcolor={['green','orange']} /> }> <H1>This is a beautiful page!</H1></Page>
import React from'react'import { Page, ScreenBackground, useDoormanUser, H1, Paragraph,} from'react-native-doorman'import { Button } from'react-native'constAfterAuth= () => {const { uid,signOut } =useDoormanUser()return ( <Pagestyle={{ marginTop:100, width:'100%' }}background={() => <ScreenBackgroundcolor={['green','orange']} />} > <H1style={{ color:'white' }}>Welcome to Doorman.</H1> <Paragraphstyle={{ color:'white' }}> Sign out below, if you want. Your user id is {uid}. </Paragraph> <Buttontitle="Sign Out"color="white"onPress={signOut} /> </Page> )}exportdefault AfterAuth
typeProps= { 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?:booleanfooter?: () =>ReactNode}