React Native Auto OTP Verification

react-native-OTPAutoverification is a small library which use Google's SMS Retriever API and auto fill inputs from SMS received includes OTP. For Android, It will fill as the SMS arrives automatically no user concern is required And on iOS the input suggestion arrives when the OTP SMS is received. It includes all the features you need regarding Focus and inputs and all the edge cases has been taken care of. You can always customize the UI of the Input elements and container as you need it and like it.

Installation Process

npm install --save react-native-otp-autoverification
or
yarn add react-native-otp-autoverification

Basic Usage

Android

#### Option: Manually

- Edit android/settings.gradle to look like this:

`` java
include ':react-native-otp-autoverification'
project(':react-native-otp-autoverification').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-otp-autoverification/android')
`

- Edit android/app/build.gradle (note: app folder) to look like this:

` java
dependencies {

implementation project(':react-native-otp-autoverification')
}
`

- Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

` java
import com.otpautoverification.OTPAutoVerificationPackage;

public class MainApplication extends Application implements ReactApplication {

// …

@Override
protected List getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List packages = new PackageList(this).getPackages();
// …
packages.add(new OTPAutoVerificationPackage());
return packages;
}

// …
}
`

JS

` javascript
import {OTPAutoVerification} from 'react-native-otp-autoverification'
...


`



More Advanced Usage

` javascript
import {OTPAutoVerification} from 'react-native-otp-autoverification'

...

inputStyles={{width: 50, height: 50}}
numberOfInputs={6}
secureTextEntry
selectionColor = {'grey'}
/>
``

Dependencies

No such Dependencies.

Parameters

| Parameter | required | Description |
| ----------------------- | -------- | ----------------------------------------------------------------------------------------------- |
| numberOfInputs | YES | Number of Input Fileds in the component |
| selectionColor | NO | Color of the selection done of the text |
| secureTextEntry | NO | Content hidden when Text entered |
| keyboardAppearance | NO | Theme for the keyboard to appear as. |
| keyboardType | NO | Type of keyboard |
| placeholder | NO | Default text shown in text fields |
| placeholderTextColor | NO | Placeholder Color |

Notes to Remember

On Android, it will be auto filled when SMS with OTP arrives but make sure you render the OTP Input fileds screen first and then SMS with OTP should arrive.

The iOS input suggestion requires React Native 0.58+ and works for iOS 12 and above.

Author

!for Sig

_{Shashank Kumawat}