react-native-otp-autoverification

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}