H1 - Doorman

1
import { H1 } from 'react-native-doorman'
Copied!
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
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 Screen = () => {
12
  const { uid, signOut } = useDoormanUser()
13
  return (
14
    <Page
15
      style={{ marginTop: 100, alignItems: 'center' }}
16
      background={() => <ScreenBackground color={['green', 'orange']} />}
17
    >
18
      <H1 centered style={{ color: 'white' }}>Welcome to Doorman.</H1>
19
      <Paragraph style={{ color: 'white' }}>
20
        Sign out below, if {`you'd`} like. Your user id is {uid}.
21
      </Paragraph>
22
      <Button title="Sign Out" color="white" onPress={signOut} />
23
    </Page>
24
  )
25
}
26
​
27
export default Screen
28
​
Copied!
Props
Takes any props that React Native's Text component accepts. 
centered If true, text is aligned to the center.

Input

Paragraph

Last modified 2yr ago

Copy link

Contents

Usage

Props