react-native-otp-input-fields-suzan v1.0.8

react-native-otp-input-fields

This is a component for OTP Input fields.

• Installation
• Usage
• Docs

Installation

npm i react-native-otp-input-fields

NOTE: This package uses react-native-reanimated under the hood for animation. Please Follow the installation process of React Native Reanimated

Usage

Below are some examples to use this package

Basic Usage

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput onChangeText={SetOTP} value={OTP} />;

Password Secure Usage

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput onChangeText={SetOTP} value={OTP} secureTextEntry={true} />;

Change Colors and other styles

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput
  onChangeText={SetOTP}
  value={OTP}
  borderColor="orange"
  boxBackgroundColor="dodgerblue"
  cursorColor="orange"
  digitColor="white"
/>;

Apply Elevation and Border Radius etc.

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput
  onChangeText={SetOTP}
  value={OTP}
  boxBorderRadius={50}
  onlyBorderBottom={false}
  boxElevation={10}
/>;

Parameters

Basic Parameters

Customization