React native inputs for real world apps. Easy to setup, configure and use.
npm install react-native-inputs --save or
yarn add react-native-inputs import { TextInput, PasswordInput } from 'react-native-inputs' <TextInput onRef={r => { this.email = r }} value={email} editable={!this.props.fetching} valid={isEmail(email)} label='Email address' returnKeyType='next' borderBottomColor='#F70044' iconElement={<Icon size={20} name='at-sign' style={{ color: '#F70044'}} />} onChangeText={text => this.handleChange(text)} onSubmitEditing={() => this.password.focus()} /> | Props | Default values | Possible values |
|---|---|---|
| label | 'Label text' | any string |
| value | none | any string |
| borderBottomColor | none | any string |
| valid | false | Boolean |
| validate | 'onBlur' | enum 'onBlur', 'onChangeText' |
| editable | false | Boolean |
| iconElement | none | Icon element e.g react-native-vector-icons |
| errorText | ${label} is not valid. | any string |
| autoCorrect | false | Boolean |
| autoCapitalize | false | Boolean |
| secureTextEntry | false | Boolean |
| keyboardType | 'default' | keyboard types supported by RN |
| returnKeyType | 'go' | returnKeyTypes supported by RN |
| errorTextStyle | { color: 'rgba(200, 0, 0, 0.8)', fontSize: 12 } | style object |
| editableTextStyle | { height: 40, color: '#2d2d2d' } | style object |
| readOnlyTextStyle | { height: 40, color: '#CCCCCC' } | style object |
| onRef | none | function |
| onSubmitEditing | none | function |
<PasswordInput value={password} valid={!!password} editable={!this.props.fetching} onRef={r => { this.password = r }} togglePasswordControlColor='#F70044' borderBottomColor='#F70044' onChangeText={text => this.handleChange(text)} onSubmitEditing={() => null} /> - All of the props for TextInput except label
| Props | Default values | Possible values |
|---|---|---|
| confirm | false | Boolean |
| togglePasswordControlColor | none | Color string (hex or rbg/a) |