# react-native-character-input > Interactive character inputs that allow custom masking Latest version **1.0.5** (published 2020-12-11) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-character-input pnpm add react-native-character-input yarn add react-native-character-input bun add react-native-character-input ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.5 | | Published | 2020-12-11 | | First published | 2019-09-21 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 269.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 16 | | Author | Hrutvik | | Maintainers | hrutvikpatel | | Keywords | react-native, reactnative, component, typscript, javascript, react-native-module, react-native-component, input, textfield, textInput, reactjs, bootstrap | ## Links - npm: https://www.npmjs.com/package/react-native-character-input - Repository: https://github.com/HrutvikPatel/react-native-character-input - Homepage: https://github.com/HrutvikPatel/react-native-character-input#readme - Issues: https://github.com/HrutvikPatel/react-native-character-input/issues - npm.io page: https://npm.io/package/react-native-character-input ## Dependencies (2) - [react-native-elements](https://npm.io/package/react-native-elements.md) ^1.2.1 - [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) ^6.6.0 ## Alternatives - [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads - [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads - [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads - [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads - [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads ## Recent versions - 1.0.5 (latest) — 2020-12-11 - 1.0.4 — 2020-10-09 - 1.0.3 — 2020-08-31 - 1.0.2 — 2019-09-29 - 1.0.1 — 2019-09-21 - 1.0.0 — 2019-09-21 ## README # react-native-character-input ![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat-square&colorB=191A17) [![npm](https://img.shields.io/npm/v/react-native-character-input.svg?style=flat-square)](https://www.npmjs.com/package/react-native-character-input) [![npm](https://img.shields.io/npm/dm/react-native-character-input.svg?style=flat-square&colorB=007ec6)](https://www.npmjs.com/package/react-native-character-input) [![github issues](https://img.shields.io/github/issues/hrutvikk/react-native-character-input.svg?style=flat-square)](https://github.com/hrutvikk/react-native-character-input/issues) [![github closed issues](https://img.shields.io/github/issues-closed/hrutvikk/react-native-character-input.svg?style=flat-square&colorB=44cc11)](https://github.com/hrutvikk/react-native-character-input/issues?q=is%3Aissue+is%3Aclosed) ----- ## Getting started `$ npm install react-native-character-input --save` ## Import `import CharacterInput from 'react-native-character-input'` ## Usage ![](src/assets/img/underlined.gif) ```javascript setValue(value)} inputType='underlined' keyboardType='numeric' /> ``` ![](src/assets/img/outlined.gif) ```javascript setValue(value)} inputType='outlined' keyboardType='numeric' /> ``` ![](src/assets/img/contained.gif) ```javascript setValue(value)} inputType='contained' keyboardType='numeric' /> ``` ## Available Props | Name | Type | Required? | Description | |-------------------|---------------------------------------------------------------------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------| | placeHolder | string | yes | String of place holder characters. | | showCharBinary | string | yes | String of `1` or `0`, indicates if corresponding character should be editable or not | | handleChange | function(value: string) => void | yes | Returns a string of modifiable characters (1) stripped of disabled characters (0). | | keyboardType | string | no | Same as `TextInput` component from react-native | | inputType | string | no | Default `underlined`, Options include: `underlined`, `outlined`, and `contained` | permanentTextStyle | StyleSheet | no | Styles `Text` component of disabled characters | | containerStyle | StyleSheet | no | Contained style of each character input | inputStyle | StyleSheet | no | Input style of each character input | | inputContainerStyle | StyleSheet | no | Input container style of each character input | | placeHolderTextColor | StyleSheet | no | Place holder text color | | autoFocus | boolean | no | auto focus on first character input | ## Features to come 1) handleChange function will return both stripped and raw input values(both modifiable and disabled characters). 2) Allow masked character inputs. - Will implement a way to specify an object of keys to REGEX values. - This will allow you to specify a mask string of keys/permanent characters. Permanent characters are not mapped as keys and keys have an associated REGEX as its rule to change the character input value. - This one will take me a while :) --- _Source: https://npm.io/package/react-native-character-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._