# react-native-pin-code > A simple pin code component for react-native Latest version **0.5.3** (published 2018-10-01) · ISC license · 0 weekly downloads ## Install ```sh npm install react-native-pin-code pnpm add react-native-pin-code yarn add react-native-pin-code bun add react-native-pin-code ``` ## 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.5.3 | | Published | 2018-10-01 | | First published | 2017-04-03 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 22.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 53 | | Author | gkueny | | Maintainers | gkueny | | Keywords | react-native, pin-code, pin, code | ## Links - npm: https://www.npmjs.com/package/react-native-pin-code - Repository: https://github.com/gkueny/react-native-pin-code - Homepage: https://github.com/gkueny/react-native-pin-code#readme - Issues: https://github.com/gkueny/react-native-pin-code/issues - npm.io page: https://npm.io/package/react-native-pin-code ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.10 ## Alternatives - [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads - [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads - [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads - [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads - [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads ## Recent versions - 0.5.3 (latest) — 2018-10-01 - 0.5.4-beta.0 (beta) — 2019-06-11 - 0.5.2 — 2018-09-13 - 0.5.1 — 2018-09-09 - 0.5.1-beta3 — 2018-09-09 - 0.5.1-beta2 — 2018-09-09 - 0.5.1-beta — 2018-09-05 - 0.5.0 — 2018-09-03 - 0.4.1 — 2018-02-08 - 0.4.0 — 2018-02-08 - 0.3.0 — 2018-02-04 - 0.0.2 — 2017-05-23 - 0.0.1 — 2017-04-03 ## README # react-native-pin-code ![last release](https://badgen.net/npm/v/react-native-pin-code) ![monthly download](https://badgen.net/npm/dm/react-native-pin-code) ![license](https://badgen.net/github/license/gkueny/react-native-pin-code) A simple pin code component ![example with blur background](https://media.giphy.com/media/xUPGcffB0VeaMd6DSM/giphy.gif) ![a simple example](https://media.giphy.com/media/3oKIPsotgoJ8ZGEr5u/giphy.gif) ## Installation npm install react-native-pin-code --save ## Example ```js console.log('hurray!')} // If user fill '2018', success is called text="A simple Pin code component" // My title error="You fail" // If user fail (fill '2017' for instance) autoFocusFirst={false} // disabling auto-focus /> ``` or ```js callback(code === '1234')} // Check manually code (ask server for instance) // and call callback function with // true (code pin is correct) // or false (code pin is false) success={() => console.log('hurray!')} // If user fill '2018', success is called text="A simple Pin code component" // My title error="You fail" // If user fail (fill '2017' for instance) autoFocusFirst={false} // disabling auto-focus /> ``` > Code prop is not needed if checkPinCode is used ## props | prop | type | description | isRequired | default value | | ----------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | code | number | pin code | not required | '' | | success | function | call on success | required | | | checkPinCode | function | this function is called to check pin code. The parameters are : `code` (the code filled by user) and a `callback` function. callback must be called with true (code pin is correct) or false (code pin is wrong) | not required | null | | obfuscation | boolean | If true, obfuscate code with '\*' | | false | | text | string | text to display as title | | 'Pin code.' | | error | string | text to display on error | | 'Bad pin code.' | | number | number | number of input to display | | 4 | | autoFocusFirst | boolean | auto focus first input | | true | | containerStyle | object, StyleSheet object | container style | | { height: 150, width: width - 30, backgroundColor : '#FFF' } | | containerPinStyle | object, StyleSheet object | inputs container style | | { width: width - 30, height: 40, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', marginTop: 20 } | | pinStyle | object, StyleSheet object | input style | | { backgroundColor : '#F0F0F0', textAlign: 'center', flex: 1, marginLeft: 20, marginRight: 20, borderRadius: 5, shadowColor: '#000000', shadowOffset: {width: 1,height : 1}, shadowRadius: 5, shadowOpacity : 0.4 } | | textStyle | object, StyleSheet object | text style | | { textAlign: 'center', color: 'gray', fontSize: 20, marginTop: 30 } | | errorStyle | object, StyleSheet object | error text style | | { textAlign: 'center', color: 'red', paddingTop: 10 } | All other `props` are pass down to `TextInput` component. For instance you can customize keyboardtype : ```js ``` ## Functions To use pin code component function, use ref : ```js this.ref = ref} ... /> ``` ## clean clean inputs and focus first input. ```js this.ref.clean(); ``` ## focus focus input at specified index ```js this.ref.focus(1); ``` ## Examples > [react-native-pin-code-examples](https://github.com/gkueny/react-native-pin-code-examples) To test examples (use [expo](https://expo.io)) : ``` git clone https://github.com/gkueny/react-native-pin-code-examples cd blurExample npm install npm run ios ``` or ``` git clone https://github.com/gkueny/react-native-pin-code-examples cd simpleExample npm install npm run ios ``` --- _Source: https://npm.io/package/react-native-pin-code · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._