otp-verifications-codes v1.1.1

compatible with iOS and Android

Installation

$ using (npm) npm i otp-verifications-codes --save

$ using (yarn) yarn add otp-verifications-codes

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)}
      inputCount={4}
    />
  </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

Methods