@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