react-native-simple-pin

Super simple and minimalistic PIN Code component for React Native

Installation

yarn add react-native-simple-pin

or

npm install --save react-native-simple-pin

Usage

Set PIN

To set PIN you need to pass into pin prop pin code length

import React from 'react';
import SimplePin from 'react-native-simple-pin'
import { Alert } from 'react-native'

const PinCodeScreenComponent = ({}) => (
    <SimplePin
        pin={4}
        title="Set my very secret PIN"
        repeatTitle="Repeat your PIN"
        onSuccess={(pin) => Alert.alert(
            'Success',
            'Hell yeah! Your PIN is ' + pin.join(''),
            [
                { text: 'OK' },
            ]
        )}
        onFailure={() => Alert.alert(
            'Failure',
            'Please, try again',
            [
                { text: 'OK' },
            ]
        )}
        titleStyle={{ fontSize: 23 }}
        numpadTextStyle={{ fontSize: 27 }}
        bulletStyle={{fontSize:25}}
    />
)

export default PinCodeScreenComponent

Check PIN

To check PIN you need to pass into pin prop array with numbers of your PIN

import React from 'react';
import SimplePin from 'react-native-simple-pin'
import { Alert } from 'react-native'

const PinCodeScreenComponent = ({}) => (
    <SimplePin
        pin={[1,2,3,4]}
        title="Enter your PIN"
        onSuccess={() => Alert.alert(
            'Success',
            'Hell yeah!',
            [
                { text: 'OK' },
            ]
        )}
        onFailure={() => Alert.alert(
            'Failure',
            'Please, try again',
            [
                { text: 'OK' },
            ]
        )}
        titleStyle={{ fontSize: 23 }}
        numpadTextStyle={{ fontSize: 27 }}
        bulletStyle={{fontSize:25}}
    />
)

export default PinCodeScreenComponent

Props

Name	Description	Default	Required	Type
pin	Pin value to verify or length of pin to set	-	Yes	Array/Number
onSuccess	Function to be used when Pin code pass verification		Yes	Function
onFailure	Function to be used when Pin code fails on verification		Yes	Function
title	Text that be dispayed on top	Enter your PIN	No	String
repeatTitle	Text that be dispayed on repeat PIN	Repeat your PIN	No	String
titleStyle	Style object for title	{fontSize: 20}	No	Object
numpadTextStyle	Style object for button on numpad	{fontSize: 27, textAlign: 'center'}	No	Object
bulletStyle	Style object for bullet	{fontSize: 27}	No	Object