@optisolbusiness/react-native-otp-inputs
TypeScript icon, indicating that this package has built-in type declarations

0.0.33 • Public • Published

@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

Package Sidebar

Install

npm i @optisolbusiness/react-native-otp-inputs

Weekly Downloads

1

Version

0.0.33

License

MIT

Unpacked Size

49.8 kB

Total Files

27

Last publish

Collaborators

  • shyamsundars
  • sujipriya
  • saisushma
  • silambarasan_1996
  • tharmadurai
  • ramprasath.raja