H1

The headline text component from Doorman.

import { H1 } from 'react-native-doorman'

Our Input component is used for the code entry.

The H1 component used by the Doorman screens corresponds to the title. The name is inspired by HTML's h1.

In the screenshot below, H1 is rendered with Enter Code.

Usage

import React from 'react'
import {
  Page,
  ScreenBackground,
  useDoormanUser,
  H1,
  Paragraph,
} from 'react-native-doorman'
import { Button } from 'react-native'

const Screen = () => {
  const { uid, signOut } = useDoormanUser()
  return (
    <Page
      style={{ marginTop: 100, alignItems: 'center' }}
      background={() => <ScreenBackground color={['green', 'orange']} />}
    >
      <H1 centered style={{ color: 'white' }}>Welcome to Doorman.</H1>
      <Paragraph style={{ color: 'white' }}>
        Sign out below, if {`you'd`} like. Your user id is {uid}.
      </Paragraph>
      <Button title="Sign Out" color="white" onPress={signOut} />
    </Page>
  )
}

export default Screen

Props

Takes any props that React Native's Text component accepts.

• centered If true, text is aligned to the center.