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:

     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:

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):

import com.otpautoverification.OTPAutoVerificationPackage;

   public class MainApplication extends Application implements ReactApplication {

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

   // …
   }  

JS

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

 <OTPAutoVerification numberOfInputs={6} /> 

More Advanced Usage

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

...

<OTPAutoVerification
    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

Shashank Kumawat