react-native-simple-pin v0.0.3

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