├── .gitignore ├── .npmignore ├── README.md ├── example └── App.js ├── index.d.ts ├── index.js ├── package.json └── screenshot.png /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .watchmanconfig 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .github 3 | example/ 4 | screenshot.png 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Keycode 2 | 3 | Show the user a input form for a fixed-length code or password. 4 | 5 |
6 | 7 |
8 | 9 | 10 | ## Installation 11 | 12 | ``` 13 | npm i -S react-native-keycode # or: yarn add react-native-keycode 14 | ``` 15 | 16 | 17 | ## Usage 18 | 19 | ``` 20 | // import statement: 21 | import { KeycodeInput } from 'react-native-keycode' 22 | 23 | // in your render function: 24 | { 26 | alert(value) 27 | }} 28 | /> 29 | ``` 30 | 31 | ### Complete example 32 | View a more complex example here: [example/App.js](example/App.js). 33 | 34 | ### Props 35 | * number `length`: number of characters in input (default: 4) 36 | * string `textColor`: color string for the color of the characters (default: black) 37 | * string `tintColor`: color string for the color of the active bottom bar (default: iOS blue) 38 | * string `defaultValue`: default '' 39 | * string `value`: default '' 40 | * boolean `uppercase`: default true 41 | * boolean `autoFocus`: default true 42 | * boolean `alphaNumeric`: default true, set to false to allow other characters than 0-9, A-Z 43 | * boolean `numberic`: default false 44 | * object `style` 45 | * function `onComplete` 46 | * function `onChange` 47 | * function `ref` 48 | 49 | 50 | ## Authors 51 | 52 | This library is developed by [Includable](https://includable.com/), a creative app and web platform 53 | development agency based in Amsterdam, The Netherlands. 54 | 55 | * Thomas Schoffelen, [@tschoffelen](https://twitter.com/tschoffelen) 56 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Text, View, StyleSheet, Button } from 'react-native'; 3 | import { KeycodeInput } from './index'; 4 | 5 | const App = () => { 6 | const [value, setValue] = useState(''); 7 | const [numeric, setNumeric] = useState(false); 8 | return ( 9 | 10 | 11 | Enter your access code 12 | 13 | setValue(newValue)} 17 | onComplete={(completedValue) => { 18 | alert('Completed! Value: ' + completedValue); 19 | }}/> 20 | 21 | 22 |