react-native-pin-code

A simple pin code component

Installation

npm install react-native-pin-code --save

Example

<CodePin
  code="2018" // code.length is used if you not pass number prop
  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
/>

or

<CodePin
  number={4} // You must pass number prop, it will be used to display 4 (here) inputs
  checkPinCode={(code, callback) => 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

All other props are pass down to TextInput component.

For instance you can customize keyboardtype :

<CodePin
  //...
  keyboardType="numeric"
/>

Functions

To use pin code component function, use ref :

  <CodePin
    ref={ref => this.ref = ref}
    ...
  />

clean

clean inputs and focus first input.

this.ref.clean();

focus

focus input at specified index

this.ref.focus(1);

Examples

react-native-pin-code-examples

To test examples (use expo) :

  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