Input

Doorman's text input component. Serves as a drop-in replacement for React Native's TextInput.

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

Our Input component is used for the code entry.

Usage

import React from 'react'
import { Input } from 'react-native-doorman'

export default function MyInput(props) {
  const [code, setCode] = useState('')
  return (
    <Input
      value={code}
      onChangeText={setCode}
      // the props below are optional!
      editable={!props.loading}
      maxLength={6}
      clearButtonMode="while-editing"
      placeholder="6-digit code"
      textContentType="oneTimeCode"
      keyboardType="number-pad"
      accessibilityHint="6-digit phone number texted to you"
      returnKeyType="done"
      autoFocus
      textColor="black"
      backgroundColor="white"
      type="elevated"
      textAlign="center"
    />
  )
}
 

Props

First, you can pass any of the props from React Native's TextInput component. See their docs here.

Other optional props:

• style object

  • Any custom Text Input styles. Does not support an array.

• textColor string

• backgroundColor string

• type "elevated" | "flat"

  • Define which pre-made style type for the input you would like.

    • elevated has drop shadow and a colored background that contrasts with the screen background.

    • flat has a transparent background and is more subtle.