rn-otp-inputs

rn-otp-inputs is a tiny Javascript 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

or

yarn add rn-otp-inputs

PeerDependencies

NOTES:

This packgae will support react@^17.0.0, react@^18.0.0,react-native@^0.68.0,react-native@^0.69.0,react-native@^0.70.0, react-native@^0.71.0, prop-types@^15.8.1, . Make sure you have install respective viersion.

npm install --save prop-types@15.8.1 react@17.0.0 react-native@0.68.0

or

yarn add prop-types@15.8.1 react@17.0.0 react-native@0.68.0

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={()=>{}}
  maskText={false}
  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={false}
/>

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.
maskText	No	Boolean	false	Hide contents of text fields .
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.

Contributors

Jayanta Garu