# react-native-inputs

> React native inputs for real world apps

Latest version **0.2.1** (published 2017-09-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-inputs
pnpm add react-native-inputs
yarn add react-native-inputs
bun add react-native-inputs
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-09-17 |
| First published | 2017-09-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Blessing Jonamu |
| Maintainers | bjonamu |
| Keywords | react-native-inputs, react-native, inputs, validation, password-input |

## Links

- npm: https://www.npmjs.com/package/react-native-inputs
- Repository: https://github.com/bjonamu/react-native-inputs
- Homepage: https://github.com/bjonamu/react-native-inputs#readme
- Issues: https://github.com/bjonamu/react-native-inputs/issues
- npm.io page: https://npm.io/package/react-native-inputs

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.2.1 (latest) — 2017-09-17
- 0.2.0 — 2017-09-15
- 0.1.0 — 2017-09-14

## README

# react-native-inputs

React native inputs for real world apps. Easy to setup, configure and use. 

[![Screenshot](https://s26.postimg.org/961r3xvmx/Simulator_Screen_Shot_15_Sep_2017_10.17.31_PM.png)](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

```
<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()}
/>
```

#### 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

```
<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}
/>
```

#### 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) |

---
_Source: https://npm.io/package/react-native-inputs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._