Super simple and minimalistic PIN Code component for React Native
yarn add react-native-simple-pin
or
npm install --save react-native-simple-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 PinCodeScreenComponentTo 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| 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 |