npm install react-native-otp-molecule

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

bash

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

tsx

import { useState } from "react";

import OtpInputs from "react-native-otp-molecule";



const OtpScreen = () => {

  const [otpValue, setOtpValue] = useState("");

  const [isComplete, setIsComplete] = useState(false);



  return (

          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.