Page

Component used by Doorman screens to wrap the entire page.

import { Page, ScreenBackground } from 'react-native-doorman'

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

<Page
  style={{ marginTop: 100, width: '100%' }}
  background={
    () => <ScreenBackground color={['green', 'orange']} />
  }
>
  <H1>This is a beautiful page!</H1>
</Page>
  

Full Example

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

Props

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
}