A highly interactive and customizable PIN code screen for React Native.

• Plug and play PIN screen with dozens of props (can be themed to suit your brand).

• Keyboard and PIN components can be used independently for more fine-grained customization.

• Animations and micro-feedback included to create a great user experience.

  

To get started install via npm:

 npm install react-native-awesome-pin --save

With Android 7 and higher you need to add the "Vibration" permission to your AndroidManifest.xml of your project. This permission is needed for keyVibration and shakeVibration properties. Add the following to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.VIBRATE"/>

The <PinScreen /> will take up the full view. It is a plug and play component... pass your logo, tagline, background colour, callback function and start verifying PINs.

Import:

import { PinScreen } from "react-native-awesome-pin";

Then add it to your code:

<PinScreen
    onRef={ ref => (this.pinScreen = ref) }
    tagline='Please enter your PIN'
    logo={ require('../../img/mylogohere.png') }
    containerStyle={{ backgroundColor: '#AAA' }}
    keyDown={ this.recievePin.bind(this) }
/>

// Callback function which receives the current PIN value
recievePin(pin){
   // Check if the PIN is correct here
}

You need to add a ref to your PinScreen, this allows you to throw an error from the parent component when a PIN is incorrect. Errors can be thrown using the throwError(message) method. Keyboard errors can be cleared using clearError()

recievePin(pin){
   // Clear error on interaction
   this.pinScreen.clearError();

   if(pin != '56771'){
       this.pinScreen.throwError('Your PIN is incorrect');
   }
}

The on-screen keyboard can be used separately if you do not want to use the plug and play <PinScreen /> component.

Import:

import { PinKeyboard } from "react-native-awesome-pin";

Then add it to your code:

<PinKeyboard
    onRef={ref => (this.keyboard = ref)}
    keyDown={this.keyDown.bind(this)}
/>

// Callback function which receives the key pressed
keyDown(key){
   // Key pressed
}

The <PinKeyboard /> also has a throwError(message) method. This will create a popup above the keyboard displaying the given error message. The style of the popup can be customized through props.

The PIN input circles can be used separately if you do not want to use the plug and play <PinScreen /> component. They come with a shake animation and configurable device vibration.

Import:

import { PinInput } from "react-native-awesome-pin";

Then add it to your code:

<PinInput
  onRef={(ref) => (this.pins = ref)}
  numberOfPins={5}
  numberOfPinsActive={2}
/>

The <PinInput /> has a shake() method which can be called through the reference this.pins.shake(). This will perform a shake animation and vibration if enabled. A callback can be passed through props which will be fired when the animation is complete. See props below.

The <PinScreen /> is a great plug and play solution for a PIN screen.

The <PinKeyboard /> uses two arrays to allow you to set keys and define custom functions for each key. This is not the most fine-tune solution and will be upgraded in the future.

If you want to issue a PR, go ahead ;)

This project is licensed under the MIT License

Thanks goes to these wonderful people (emoji key):

Gerwim 🐛 🤔

Luke Brandon Farrell 💻 📖 🤔 👀

This project follows the all-contributors specification. Contributions of any kind welcome!