React Native OTP Molecule

A lightweight and customizable OTP (One-Time Password) input component for React Native. Built for flexibility, accessibility, and easy integration in login, verification, or 2FA screens.

🧩 Pure React Native — no external dependencies required. Just install and use it right away in your project.

📦 Installation

npm install react-native-otp-molecule
# or
yarn add react-native-otp-molecule

That’s it — no linking, no native modules, and no extra setup.

🚀 Usage Example

import { useState } from "react";
import OtpInputs from "react-native-otp-molecule";

const OtpScreen = () => {
  const [otpValue, setOtpValue] = useState("");
  const [isComplete, setIsComplete] = useState(false);

  return (
    <OtpInputs
      inputsCount={6}
      onSubmit={(otp, complete) => {
        setOtpValue(otp);
        setIsComplete(complete);
      }}
      placeHolderTextColor="#ccc"
      // secureEntry={true} // Uncomment to show dots instead of digits
    />
  );
};

export default OtpScreen;

🧠 Features

🔢 Supports up to 6 input boxes

🎨 Fully customizable styles

🔒 Optional secure mode to hide OTP digits (secureEntry)

⚡ Lightweight and dependency-free

📱 100% React Native only — no native modules

Available Props

The following props are available to customize the component:

| Prop | Type | Default | Description | | -------------------- | ------------------------------------------ | --------------------- | --------------------------------------------------------------- | | inputsCount | number | 4 | The number of input boxes to display | | onSubmit | (otp: string, isComplete: boolean) => void | (otp, complete) => {} | A function to call when the user has completed entering the OTP | | containerStyle | ViewStyle | {} | A style object to customize the container view | | inputStyle | TextStyle | {} | A style object to customize the input text style | | inputFocusedStyle | TextStyle | {} | A style object to customize the focused input text style | | inputFilledStyle | TextStyle | {} | A style object to customize the filled input text style | | inputErrorStyle | TextStyle | {} | A style object to customize the error input text style | | placeHolderTextColor | string | "#ccc" | The color of the placeholder text | | secureEntry | boolean | true | Whether to hide the OTP digits (secureEntry) |

License

This project is licensed under the MIT License.