@optisolbusiness/react-native-otp-inputs
@optisolbusiness/react-native-otp-inputs
Installation
npm i @optisolbusiness/react-native-otp-inputs
npm install react-native-otp-verify
Usage
Things to follow for auto read otp feature
android
Make otpAutoRead prop as true can get hashValue from hashValue prop pass this hashValue while sending otp
While crafting the OTP message keep below things in mind
Should start with <#>, to register as an OTP SMS The message should end with the generated hash key
Sample Message
<#> Welcome to AwsomeProject. Your verification code is 5843.
kFUwfusCq/+ => Give your hash value
ios
In ios auto read otp work for ios 12+
In device settings => Passwords Enable AutoFill Passwords
In code Pass textType={'oneTimeCode'} for auto read otp from messages in ios
In ios otp will not fill automatically from messages, it will appear on top of keyboard. When click on otp it will fill automatically.
import { OTP_Input } from "@optisolbusiness/react-native-otp-inputs";
// ...
<OTP_Input
numberOfDigits={5}
onHandleOTPChange={valueChange}
otpAutoRead={true}
hashValue={hashNum}
InputStyle={{
margin: 5,
width: 40,
height: 40,
borderWidth: 1,
borderColor: "#ccc",
fontSize: 18,
textAlign: "center",
borderRadius: 5,
}}
styleContiner={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
}}
textType={'oneTimeCode'}
/>
OTP_INput Props
Prop | Type | Description |
---|---|---|
numberOfDigits |
Number |
Mandatory. Pass Number accorind to requirement |
onHandleOTPChange |
Function |
Mandatory. On otp input change |
otpAutoRead |
boolean |
Optional. Enable for auto read otp feature in android |
hashValue |
Number |
Optional. Pass this hash value while sending messages in android |
textType |
String |
Optional. Give oneTimeCode prop to enable auto read otp feature in ios |
InputStyle |
Object |
Optional. overide container style |
styleContiner |
Object |
Optional. overide TextBox style |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT
Made with create-react-native-library