https://github.com/bjonamu/react-native-inputs
React native inputs for real world apps. Easy to setup, configure and use.
https://github.com/bjonamu/react-native-inputs
passwordinput react-native react-native-inputs react-native-validation textinput
Last synced: about 2 months ago
JSON representation
React native inputs for real world apps. Easy to setup, configure and use.
- Host: GitHub
- URL: https://github.com/bjonamu/react-native-inputs
- Owner: bjonamu
- License: mit
- Created: 2017-09-14T08:07:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-17T14:23:09.000Z (over 8 years ago)
- Last Synced: 2024-08-10T00:08:44.781Z (over 1 year ago)
- Topics: passwordinput, react-native, react-native-inputs, react-native-validation, textinput
- Language: JavaScript
- Homepage:
- Size: 7.81 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-inputs
React native inputs for real world apps. Easy to setup, configure and use.
[](https://postimg.org/image/iqldqtkyt/)
## Installation
```
npm install react-native-inputs --save
```
or
```
yarn add react-native-inputs
```
## Usage
```
import { TextInput, PasswordInput } from 'react-native-inputs'
```
### TextInput
```
{ this.email = r }}
value={email}
editable={!this.props.fetching}
valid={isEmail(email)}
label='Email address'
returnKeyType='next'
borderBottomColor='#F70044'
iconElement={}
onChangeText={text => this.handleChange(text)}
onSubmitEditing={() => this.password.focus()}
/>
```
#### TextInput props
| 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](https://github.com/oblador/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
```
{ this.password = r }}
togglePasswordControlColor='#F70044'
borderBottomColor='#F70044'
onChangeText={text => this.handleChange(text)}
onSubmitEditing={() => null}
/>
```
#### PasswordInput props
* All of the props for TextInput except label
| Props | Default values | Possible values |
| -------------------------- | -------------- | --------------------------- |
| confirm | false | Boolean |
| togglePasswordControlColor | **none** | Color string (hex or rbg/a) |