@miidx/rn-pin-input NPM

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.

npm.io

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.

@miidx/rn-count-down

@infinitebrahmanuniverse/nolb-_mii @everything-registry/sub-chunk-603

0.9.2

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago