/react-native-pincode

A PIN code component for react native

Primary LanguageTypeScriptMIT LicenseMIT

react-native-pincode

npm npm code style: prettier

A customizable PIN Code component for react native

Using:

Installation

npm install --save @haskkor/react-native-pincode

or

yarn add @haskkor/react-native-pincode

Please note that:

Async storage uses the react-native-async-storage library which has to be linked

react-native link @react-native-community/async-storage

If you wish to use the TouchID/FaceID authentication you will have to link the library:

react-native link react-native-touch-id

If you wish to use Keychain/Keystore to store the PIN code you will have to link the library:

react-native link react-native-keychain

If you wish to use FaceID you'll need to add the permission in your info.plist

<key>NSFaceIDUsageDescription</key>
<string>Enabling Face ID allows you quick and secure access to your account.</string>

Please note that you might have to link those libraries manually.

IMPORTANT: If you decide not to use Keychain/Keystore, you will have to provide a storePin property to the PINCode component.

The library uses the Vibration from React Native. Please note that on Android it requires the Vibrate permission as stated in the doc. (add to AndroidManifest.xml)

Demo

choose-confirm enter-locked

Usage

Basic usage requires choosing between the choose, enter and locked modes.

  • choose : requires the user to choose and to confirm a PIN code
  • enter : requires the user to enter the PIN code he previously chose
  • locked : prints a locked screen for a given time if the user failed to enter his/her PIN code too many times
import PINCode from '@haskkor/react-native-pincode'
<PINCode status={'choose'}/>

Package provides a promise to know if a PIN code has been set by the user. The serviceName parameter is optional. If provided, it should match the pinCodeKeychainName property.

import {hasUserSetPinCode} from '@haskkor/react-native-pincode'
await hasUserSetPinCode(serviceName)

One can also use a provided function to delete a PIN code previously set in the Keychain. The service name parameter is optional. If provided, it should match the pinCodeKeychainName property.

import {deleteUserPinCode} from '@haskkor/react-native-pincode'
await deleteUserPinCode(serviceName)

If needed, the internal states that record the number of attemps and time of last attempt can be reset in addition to user pin code deletion.

import {resetPinCodeInternalStates} from '@haskkor/react-native-pincode'
await resetPinCodeInternalStates()

Options

Key Description Default Required Type
alphabetCharsVisible Boolean to hide/show English alphabet on PIN panel false false boolean
bottomLeftComponent Component to replace the empty space at the bottom left of the numpad Empty space false any
buttonComponentLockedPage Button component to be used at the bottom of the page on the locked application page TouchableOpacity exit button killing the application false any
buttonDeleteComponent Button component to be used at the bottom right of the PIN panel to delete a previous entry TouchableHighlight button with a delete text and the backspace material icon false any
buttonDeleteText Text of the of the button used to delete a previous entry on the PIN panel delete false string
buttonNumberComponent Button component to be used on the PIN panel to select a character for the PIN TouchableHighlight button with a number text false any
callbackErrorTouchId Callback to be used when the TouchID authenticate method throws an error console.log('TouchID error', e) false (error: Error) => void
customBackSpaceIcon Function, that returns custom backspace component to be used to replace the default backspace one on the PIN screen Function
disableLockScreen Boolean to disable the lock screen false false boolean
endProcessFunction Function to handle the end of the process None false (pinCode: string) => void
finishProcess Function to be used when the user enters the right PIN code Removes the values in AsyncStorage and set the status to success false (pinCode?: string) => void
getCurrentPinLength Function returning the length of the current PIN code None false (length: number) => void
handleResultEnterPin Function to be used to handle the PIN code entered by the user. Can be used for external-custom pin validation, return boolean to override internal pin validation undefined false (pinCode?: string) => bool or undefined
iconComponentLockedPage View component to be used between the timer and the text on the locked application page A circular red View using the lock material icon false any
iconButtonDeleteDisabled Boolean to remove the icon on the delete button of the PIN panel false false boolean
launchTouchID Function to manually trigger the touchID undefined false () => void
lockedIconComponent Component to replace the locked icon on the locked application page Material lock icon false any
lockedPage View component used as a locked page if the user fails to provide the correct PIN code maxAttempts times A application locked page with a timer indicating to the user the remaining time locked and a button closing the application false any
maxAttempts Number of attempts the user is given before locking the application 3 false number
onClickButtonLockedPage Function to be used when the user taps the button on the locked application page Kills the app by throwing Quit application false any
onFail Function to be used when the user enters the wrong PIN code Returns number of failed attempts false any
passwordComponent Component to be used to indicate to the user how many characters he/she typed. To be used with the getCurrentPinLength prop Dots growing or shrinking when the user adds or removes a character in the PIN code false any
passwordLength Length of the password the user has to enter 4 false number
pinAttemptsAsyncStorageName String to be used as a key in AsyncStorage to store the number of attempts the user already made pinAttemptsRNPin false string
pinCodeKeychainName String to be used as a key to store the PIN code in Keychain/Keystore reactNativePinCode false string
pinCodeVisible Boolean to show/hide the PIN code typed by the user None false boolean
pinStatus Status coming back to the PIN component after the handleResultEnterPin function. The status type is a value of the PinResultStatus enum (initial, success, failure, locked) None false PinResultStatus enum
status Indicates the mode that should be used (see Usage section for the different modes available) None true choose or enter or locked
storedPin The PIN code previously stored with the storePin function The PIN Code previously stored in the Keychain/Keystore false string
storePin Function that will be used to store the PIN (pin is given as a string argument) Stores the PIN in Keychain/Keystore false any
subtitleChoose String used as a subtitle on the PIN code choose page to keep your information secure false string
subtitleComponent Component to be used as a subtitle on all the PIN code pages Light grey Text component false any
subtitleConfirm String used as a subtitle on the PIN code confirmation page None false string
subtitleEnter String used as a subtitle on the PIN code enter page None false string
subtitleError String used as a subtitle on the PIN code pages when an error occurs (wrong PIN code used for enter or confirm modes) Please try again false string
textButtonLockedPage String to be used as text on the button in the locked application page Quit false string
textCancelButtonTouchID String to be used as text on the cancel button of the touchID popup. Only for Android Cancel false string
textDescriptionLockedPage String to be used as a description on the locked application page To protect your information, access has been locked for {timeLocked} minutes. false string
textSubDescriptionLockedPage String to be used as a subtitle on the locked application page Come back later and try again. false string
textPasswordVisibleFamily Font to be used for the PIN code numbers when pinCodeVisible is true system font false string
textPasswordVisibleSize Size of the font used for the PIN code numbers when pinCodeVisible is true 22 false number
textTitleLockedPage String to be used as a title on the locked application page Maximum attempts reached false string
timeLocked Number of milliseconds where the application should be locked after maxAttempts failed attempts from the user 300000 (5 minutes) false number
timePinLockedAsyncStorageName String to be used as a key in AsyncStorage to store the time when the user locks the application timePinLockedRNPin false string
timerComponentLockedPage Component to be used on the application locked page to indicates the remaining locked time to the user A Text component displaying a timer with the remaining locked time on the application locked page false any
titleAttemptFailed String used as a title on the PIN enter page when the user enters a wrong PIN code Incorrect PIN Code false string
titleChoose String used as a title on the PIN choose page 1 - Enter a PIN Code false string
titleComponent Component to be used as a title on all the PIN code pages Light grey Text component false any
titleComponentLockedPage Component to be used as a title on the application locked page Light grey Text component false any
titleConfirm String used as a title on the PIN confirm page 2 - Confirm your PIN Code false string
titleConfirmFailed String used as a title on the PIN confirm page when the user enters a wrong PIN code Your entries did not match false string
titleEnter String used as a title on the PIN enter page Enter your PIN Code false string
titleValidationFailed String used as a title on the PIN choose page when the PIN code entered by the user does not match the provided RegExp (use with validationRegex property PIN code unsafe false string
touchIDDisabled Boolean disabling the TouchID/FaceID on the PIN code enter page false false boolean
touchIDSentence String to be used in the TouchID/FaceID popup To unlock your application false string
touchIDTitle ANDROID ONLY. String to be used in the TouchID/FaceID popup title. Authentication Required false string
validationRegex Regex to be used to validate the PIN code entered by the user on choose mode None false RegExp
vibrationEnabled Boolean enabling vibration feedback when an incorrect PIN is entered true false boolean
delayBetweenAttempts Delay when an incorrect PIN is entered 3000 false number

Styles

Key Description Default Type
colorCircleButtons Color of the circle buttons rgb(242, 245, 251) string
colorPassword Color of the dots used for the password component turquoise string
colorPasswordEmpty Color of the dots used for the password component when small turquoise string
colorPasswordError Color of the dots used for the password component on error state #9DAFC8 string
numbersButtonOverlayColor Color of the PIN panel buttons when highlighted turquoise string
styleAlphabet Text of English letters on PIN panel. (First, set alphabetCharsVisible={true}) fontSize: grid.unit/2, fontWeight: "300" StyleProp<TextStyle>
styleMainContainer Main container of index file flex: 1, justifyContent: 'center', alignItems: 'center' StyleProp<ViewStyle>
stylePinCodeChooseContainer Main container of PinCodeChoose file flex: 1, justifyContent: 'center', alignItems: 'center' StyleProp<ViewStyle>
stylePinCodeEnterContainer Main container of PinCodeEnter file flex: 1, justifyContent: 'center', alignItems: 'center' StyleProp<ViewStyle>
styleLockScreenButton Button of the lock screen backgroundColor: colors.turquoise, borderRadius: grid.border, paddingLeft: grid.unit * 2, paddingRight: grid.unit * 2, paddingBottom: grid.unit, paddingTop: grid.unit StyleProp<ViewStyle>
styleLockScreenColorIcon Color of the icon on the lock screen white string
styleLockScreenMainContainer Main container of the lock screen position: 'absolute', top: 0, backgroundColor: colors.background, flexBasis: 0, left: 0, height: '100%', width: '100%', alignItems: 'center', flex: 1, justifyContent: 'center' StyleProp<ViewStyle>
styleLockScreenNameIcon Name of the material icon to be used on the lock screen lock string
styleLockScreenSizeIcon Size of the icon on the lock screen 24 number
styleLockScreenText Text on the lock screen (Come back..., To protect...) fontSize: grid.unit, color: colors.base, lineHeight: grid.unit * grid.lineHeight, textAlign: 'center' StyleProp<TextStyle>
styleLockScreenTextButton Text of the button of the lock screen color: colors.white, fontWeight: 'bold', fontSize: 14 StyleProp<TextStyle>
styleLockScreenTextTimer Text of the timer of the lock screen fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace', fontSize: 20, color: colors.base StyleProp<TextStyle>
styleLockScreenTitle Title of the lock screen fontSize: grid.navIcon, color: colors.base, opacity: grid.mediumOpacity, fontWeight: '200', marginBottom: grid.unit * 4 StyleProp<TextStyle>
styleLockScreenViewCloseButton View of the button close of the lock screen alignItems: 'center', opacity: grid.mediumOpacity, justifyContent: 'center', marginTop: grid.unit * 2 StyleProp<ViewStyle>
styleLockScreenViewIcon View containing the icon of the lock screen width: grid.unit * 4, justifyContent: 'center', alignItems: 'center', height: grid.unit * 4, borderRadius: grid.unit * 2, opacity: grid.mediumOpacity, backgroundColor: colors.alert, overflow: 'hidden', marginBottom: grid.unit * 4 StyleProp<ViewStyle>
styleLockScreenViewTextLock View containing all the text of the lock screen justifyContent: 'center', alignItems: 'center', paddingLeft: grid.unit * 3, paddingRight: grid.unit * 3, flex: 3 StyleProp<ViewStyle>
styleLockScreenViewTimer View of the timer of the lock screen paddingLeft: 30, paddingRight: 30, paddingBottom: 10, paddingTop: 10, borderRadius: 4, borderWidth: 2, borderColor: 'rgb(230, 231, 233)', marginBottom: grid.unit * 4 StyleProp<ViewStyle>
stylePinCodeButtonCircle Circle button TouchableHighlight of the PinCode file alignItems: 'center', justifyContent: 'center', width: grid.unit * 4, height: grid.unit * 4, backgroundColor: 'rgb(242, 245, 251)', borderRadius: grid.unit * 2 StyleProp<ViewStyle>
stylePinCodeButtonNumber Color of the number buttons on the Pin code page 'white' string
stylePinCodeButtonNumberPressed Color of the number buttons on the Pin code page when pressed #9DAFC8 string
stylePinCodeCircle Style of the pinCode dots left, height, width, opacity, borderRadius, marginLeft, marginRight, and backgroundColor inherited from the animation StyleProp<ViewStyle>
stylePinCodeColorSubtitle Color of the PinCode page subtitle in normal state #9DAFC8 string
stylePinCodeColorSubtitleError Color of the the PinCode page subtitle in error state #FC4349 string
stylePinCodeColorTitle Color of the the PinCode page title in normal state #9DAFC8 string
stylePinCodeColorTitleError Color of the the PinCode page title in error state #9DAFC8 string
stylePinCodeColumnButtons Column of buttons of the PinCode file alignItems: 'center', width: 'auto' StyleProp<ViewStyle>
stylePinCodeColumnDeleteButton Column of the delete button of the PinCode file width: grid.unit * 4, height: grid.unit * 4, marginLeft: grid.unit / 2, marginRight: grid.unit / 2, justifyContent: 'center', alignItems: 'center', flexDirection: 'column' StyleProp<ViewStyle>
stylePinCodeDeleteButtonColorHideUnderlay Color of the delete button when underlay is hidden of the PinCode file rgb(211, 213, 218) string
stylePinCodeDeleteButtonColorShowUnderlay Color of the delete button when underlay is shown of the PinCode file colors.turquoise string
stylePinCodeDeleteButtonIcon Name of the icon of the delete button of the PinCode file backspace string
stylePinCodeDeleteButtonSize Size of the icon of the delete button of the PinCode file 30 number
stylePinCodeDeleteButtonText Text of the delete button of the PinCode file fontWeight: '200', marginTop: 5 StyleProp<TextStyle>
stylePinCodeEmptyColumn Empty column of the last line of buttons of the PinCode file width: grid.unit * 4, height: grid.unit * 4 StyleProp<ViewStyle>
stylePinCodeHiddenPasswordCircle Circle representing the hidden password of the PinCode file flexDirection: 'row', height: 'auto', justifyContent: 'center', alignItems: 'center' StyleProp<ViewStyle>
stylePinCodeHiddenPasswordSizeEmpty Size of the circle representing the hidden password of the PinCode file when empty 4 number
stylePinCodeHiddenPasswordSizeFull Size of the circle representing the hidden password of the PinCode file when full 8 number
stylePinCodeMainContainer Main container of the PinCode file flex: 1, justifyContent: 'center', alignItems: 'center' StyleProp<ViewStyle>
stylePinCodeRowButtons Row of buttons of the PinCode file justifyContent: 'center', alignItems: 'center', width: '100%', height: grid.unit * 5.5 StyleProp<ViewStyle>
stylePinCodeTextButtonCircle Text of circle button TouchableHighlight of the PinCode file fontSize: grid.unit * 2, fontWeight: '200' StyleProp<TextStyle>
stylePinCodeTextSubtitle Title of the PinCode file fontSize: 20, fontWeight: '200', lineHeight: grid.unit * 2.5 StyleProp<TextStyle>
stylePinCodeTextTitle Subtitle of the PinCode file fontSize: grid.unit, fontWeight: '200', textAlign: 'center' StyleProp<TextStyle>
stylePinCodeViewTitle View of the title of the PinCode file flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: grid.unit * 4 StyleProp<TextStyle>

Contributing

Pull requests are welcome.