otp-verifications-codes

$ npm i otp-verifications-codes --save

Usage no npm install needed!

<script type="module">
  import otpVerificationsCodes from 'https://cdn.skypack.dev/otp-verifications-codes';
</script>

README

compatible with iOS and Android

SCREENSHOT

Installation

$ npm i otp-verifications-codes --save

Usage

Basic Usage

Set the callback function when onInputCompleted, you can get the OTP input insert by the user.

Auto rest input Value onCompleted Acitve Code

import OTPVerificationsCodes from "otp-verifications-codes";
...

<OTPVerificationsCodes
  onInputCompleted={(otpCode) => onInputCompleted(otpCode)}
/>

onInputCompleted = (text) => {
     // Do what you want to do here Like axios call or fetch
}
...

Advanced Usage

import OTPVerificationsCodes from "otp-verifications-codes";

<View style={styles.container}>
  <View style={styles.simpleModal}>
    <Text style={{ textAlign: "center", color: "#000" }}>
      react native OTPVerificationsCodes
    </Text>
    <OTPVerificationsCodes
      ViewWrapperStyle={styles.ViewWrapperStyle}
      codeInputStyle={styles.inputStyle}
      focusedBordercolor={"#00FFFF"}
      borderColor={"black"}
      warningTitle={"warning"}
      warningContent={"Please Enter Number Only"}
      warningButtonText={"ok"}
      onInputCompleted={(otpCode) => console.log(otpCode)}
    />
  </View>
</View>;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#C0C0C0",
  },
  simpleModal: {
    width: "80%",
    justifyContent: "center",
    borderRadius: 15,
    borderColor: "black",
    borderWidth: 1,
    backgroundColor: "white",
    opacity: 0.8,
    paddingTop: 20,
    paddingBottom: 30,
    marginBottom: -30,
  },
  inputStyle: {
    height: 35,
    fontSize: 16,
    borderRadius: 10,
    borderWidth: 1,
    backgroundColor: "#FEFFFE",
    color: "#222",
    padding: 5,
    width: 35,
    textAlign: "center",
  },
  ViewWrapperStyle: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-around",
    paddingVertical: 40,
  },
});

Properties

Prop PropType Default Value isRequired
ViewWrapperStyle Object Empty Yes
codeInputStyle Object Empty Yes
borderColor String #000 No
focusedBordercolor String #00FFFF No
warningTitle String warning No
warningContent String Please Enter Number Only No
warningButtonText String Ok No
secureText Boolean false No

Methods

Name isRequired Description
onInputCompleted Yes When the text in the input box completed, the method is called, and Otp code returned.