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 [email protected] [email protected] [email protected]

or

yarn add [email protected] [email protected] [email protected]

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