@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