Rn-otp-inputs NPM

rn-otp-inputs TS

rn-otp-inputs is a tiny Javascript/typescripts library which provides an elegant UI for the end user to input one time passcode (OTP). It handles autocomplete functionality and it display remaining time for OTP. It also features a carefully crafted flow to handle edge cases for volatile user gestures. We provide default UI, but you can always customize the appearance as you like.

ScreenShot

Ios

Android

Installation

npm install --save rn-otp-inputs

yarn add rn-otp-inputs

PeerDependencies

NOTES:

This packgae will support react@^17.0.0, react@^18.0.0,react-native@^0.68.0 to react-native@^0.75.3, . Make sure you have install respective viersion.

npm install --save react@17.0.0 react-native@latest

yarn add react@17.0.0 react-native@latest

Basic Usage

import RnOtpInputs from 'rn-otp-inputs';

...

<RnOtpInputs  pinCount={4} onSubmit={()=>{}} />

More Advanced Usage

import  RnOtpInputs  from  'rn-otp-inputs';

...
const  [value,  setValue]  =  useState('');
...
<RnOtpInputs
  pinCount={4}
  mode='rectangle'
  onSubmit={()=>{}}
  autoSubmit={true}
  borderRadius={6}
  borderWidth={1}
  borderColor='#A768F1'
  bgColor='#D9E3F6'
  textColor='#000000'
  onChageValue={setValue}
  keyboardType='number-pad'
  buttonTitle='Verify & Proceed'
  Minute={1}
  Second={0}
  onlyResendOtp={false}
  onResendClick={()=>{}}
/>

Parameters

Parameter	Required	Type	Default	Description
pinCount	`Yes`	`Number`	`4`	Number of digits in the component , range is 4-6.
onSubmit	`Yes`	`Function`	`()=>{}`	Callback when Submit Button is Click.
mode	`No`	`String`	`rectangle`	`mode` can be rectangle, flat or circle.
autoSubmit	`No`	`Boolean`	`false`	Callback when the digits are filled . `Note :` If value is `true` then we can get `entered value` from `onSubmit`. e.g.`onSubmit={(value)=>{console.log(value)}}`
borderRadius	`No`	`Number`	`6`	Change Border Radius of input field. `Note :`borderRadius will apply when mode is `reactangle`
borderColor	`No`	`String`	`#A768F1`	Change Border Color of input field.
borderWidth	`No`	`Number`	`1`	Change Border Width of input field.
bgColor	`No`	`String`	`#D9E3F6`	Change Background Color of input field.
textColor	`No`	`String`	`#000000`	Change the style of the input Text.
onChageValue	`No`	`Function`	`()=>{}`	Callback when the digits are Changed.
keyboardType	`No`	`String`	`number-pad`	Keyboard type.
buttonTitle	`No`	`String`	`Verify & Proceed`	Button Title .
Minute	`No`	`Number`	`1`	Remaining Time in minute.
Second	`No`	`Number`	`0`	Remaining Time in Second.
onlyResendOtp	`No`	`Boolean`	`false`	If value is `true` Remaining time will not Display, Only Resend Otp Button will display.
onResendClick	`No`	`Function`	`()=>{}`	Callback when the Resend Button clicked.
buttonStyle	`No`	`object`	`{{flex: 1,height: scale(40)}}`	Change the style of the Button.
buttonTitleStyle	`No`	`object`	`{{fontSize: scale(15),color: "#FFFFFF"}}`	Change the style of the Button Title.
resendButtonStyle	`No`	`object`	`{{fontSize: scale(15), color: "#404B69"}}`	Change the style of the Resend Button.
inputHeightAndWidth	`No`	`Number`	`50`	Height and width of input field.
isError	`No`	`Boolean`	`false`	To Display Error Message.
errorMsg	`No`	`String`	`Invalid OTP.`	Change the Error Message.
errorMsgStyle	`No`	`object`	`{{fontSize: scale(12),color: "red"}}`	Change the style of Error Message.
isButtonDisplay	`No`	`Boolean`	`true`	If you don't want to use Button, then you have to pass `false` . `NOTE` If the value is `true` and you don't want to use any button for submit , then you have to use `autoSubmit` props.
isResendOtpDisplay	`No`	`Boolean`	`true`	If you don't want to use Resend OTP Button, then you have to pass `false`.