React native PIN code component
npm install @kenetto/react-native-pincode  
_A customizable PIN Code component for react native_
Using:
* _react-native-keychain_ to store the pin in Keychain/Keystore
* _react-native-touch-id_ to authenticate users with FaceID/TouchID
* _react-move_ for animations
* _react-native-vector-icons_ to use the material icons
``
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
`
_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
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'
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()
| 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. To be used with the pinStatus props|Functions that checks the validity of the give PIN code, stores the number of failed attempts in the AsyncStorage and the time the application was locked if needed|false|any|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
||Delay when an incorrect PIN is entered|3000|false|number
| 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|styleMainContainer
||Main container of index file|flex: 1, justifyContent: 'center', alignItems: 'center'|StyleProp|stylePinCodeChooseContainer
||Main container of PinCodeChoose file|flex: 1, justifyContent: 'center', alignItems: 'center'|StyleProp|stylePinCodeEnterContainer
||Main container of PinCodeEnter file|flex: 1, justifyContent: 'center', alignItems: 'center'|StyleProp|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|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|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|styleLockScreenTextButton
||Text of the button of the lock screen|color: colors.white, fontWeight: 'bold', fontSize: 14|StyleProp|styleLockScreenTextTimer
||Text of the timer of the lock screen|fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace', fontSize: 20, color: colors.base|StyleProp|styleLockScreenTitle
||Title of the lock screen|fontSize: grid.navIcon, color: colors.base, opacity: grid.mediumOpacity, fontWeight: '200', marginBottom: grid.unit * 4|StyleProp|styleLockScreenViewCloseButton
||View of the button close of the lock screen|alignItems: 'center', opacity: grid.mediumOpacity, justifyContent: 'center', marginTop: grid.unit * 2|StyleProp|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|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|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|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|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|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|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|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|stylePinCodeEmptyColumn
||Empty column of the last line of buttons of the PinCode file|width: grid.unit 4, height: grid.unit 4|StyleProp|stylePinCodeHiddenPasswordCircle
||Circle representing the hidden password of the PinCode file|flexDirection: 'row', height: 'auto', justifyContent: 'center', alignItems: 'center'|StyleProp|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|stylePinCodeRowButtons
||Row of buttons of the PinCode file|justifyContent: 'center', alignItems: 'center', width: '100%', height: grid.unit * 5.5|StyleProp|stylePinCodeTextButtonCircle
||Text of circle button TouchableHighlight of the PinCode file|fontSize: grid.unit * 2, fontWeight: '200'|StyleProp|stylePinCodeTextSubtitle
||Title of the PinCode file|fontSize: 20, fontWeight: '200', lineHeight: grid.unit * 2.5|StyleProp|stylePinCodeTextTitle
||Subtitle of the PinCode file|fontSize: grid.unit, fontWeight: '200', textAlign: 'center'|StyleProp|stylePinCodeViewTitle
||View of the title of the PinCode file|flexDirection: 'column', justifyContent: 'center', alignItems: 'center', minHeight: grid.unit * 4|StyleProp
Pull requests are welcome.