@miidx/rn-pin-input

rn-pin-input

A React Native pin-input component with time count down. This component will always show empty six pin-input field to be filled later by user.

Installation

    npm i @miidx/rn-pin-input

Usage

    <PinInput
        value={'123456'}
        onTextChanged={input => { console.log(input); }}
        pinExpirationDate="2019-12-19T17:32+07:00"
        onPinExpired={() => { console.log('Time is up!'); }}
        countdownLabel={'PIN will expire in'}
    />

Properties

Name	Description	Type	Required	Default value
containerStyle	Style of text input field container	object	no	{}
contentContainerStyle	Style of each pin-input container	object	no	{}
countdownLabel	Text shown beside time count down	string	no	''
expiringLabel	Text shown after reach end time of count down	string	no	'Pin has expired'
onPinExpired	Callback called when pin has expired	function	yes
onTextChanged	Callback when text on pin-input field changed	function	yes
pinExpirationDate	Expiring pin time value in complete ISO-8601 date time format YYYY-MM-DDTHH:mmZ. YYYY is 4 digit year, MM is month number, DD is day of month, HH is hours in 24 hour time, mm is minutes, and Z is offset from UTC time, such as +-HH:mm. Adding seconds s and fractional seconds SS are optional	string	yes
textStyle	Style of pin text inside component	object	no	{}
value	Complete number value of pin input	string	yes

Note:

• This package use rn-count-down component for its count down timer to read the documentation, click here.