Input
Doorman's text input component. Serves as a drop-in replacement for React Native's TextInput.
1
import { Input } from 'react-native-doorman'
Copied!
Our Input component is used for the code entry.

Usage

1
import React from 'react'
2
import { Input } from 'react-native-doorman'
3
4
export default function MyInput(props) {
5
const [code, setCode] = useState('')
6
return (
7
<Input
8
value={code}
9
onChangeText={setCode}
10
// the props below are optional!
11
editable={!props.loading}
12
maxLength={6}
13
clearButtonMode="while-editing"
14
placeholder="6-digit code"
15
textContentType="oneTimeCode"
16
keyboardType="number-pad"
17
accessibilityHint="6-digit phone number texted to you"
18
returnKeyType="done"
19
autoFocus
20
textColor="black"
21
backgroundColor="white"
22
type="elevated"
23
textAlign="center"
24
/>
25
)
26
}
27
Copied!

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.
Last modified 2yr ago
Copy link
Contents
Usage
Props