https://github.com/tschoffelen/react-native-keycode

🔢 Show the user a input form for a fixed-length code or password.
https://github.com/tschoffelen/react-native-keycode

android ios react-native

Last synced: 2 days ago
JSON representation

🔢 Show the user a input form for a fixed-length code or password.

• Host: GitHub
• URL: https://github.com/tschoffelen/react-native-keycode
• Owner: tschoffelen
• Created: 2017-12-08T21:05:09.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-09-25T07:33:43.000Z (about 1 year ago)
• Last Synced: 2024-11-11T21:13:36.977Z (7 days ago)
• Topics: android, ios, react-native
• Language: JavaScript
• Homepage: https://flexible.agency
• Size: 85 KB
• Stars: 43
• Watchers: 4
• Forks: 20
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Keycode

Show the user a input form for a fixed-length code or password.

    

## Installation

```

npm i -S react-native-keycode         # or: yarn add react-native-keycode

```

## Usage

```

// import statement:

import { KeycodeInput } from 'react-native-keycode'

// in your render function:

 {

    alert(value)

  }}

/>

```

### Complete example

View a more complex example here: [example/App.js](example/App.js).

### Props

* number `length`: number of characters in input (default: 4)

* string `textColor`: color string for the color of the characters (default: black)

* string `tintColor`: color string for the color of the active bottom bar (default: iOS blue)

* string `defaultValue`: default ''

* string `value`: default ''

* boolean `uppercase`: default true

* boolean `autoFocus`: default true

* boolean `alphaNumeric`: default true, set to false to allow other characters than 0-9, A-Z

* boolean `numberic`: default false

* object `style`

* function `onComplete`

* function `onChange`

* function `ref`

## Authors

This library is developed by [Includable](https://includable.com/), a creative app and web platform

development agency based in Amsterdam, The Netherlands.

* Thomas Schoffelen, [@tschoffelen](https://twitter.com/tschoffelen)