🔐 react-native-otp-box-input

A simple, customizable, and powerful OTP (One-Time Password) input component for React Native. Designed to provide a smooth OTP entry experience on both iOS and Android.

Whether you’re implementing mobile number verification, secure logins, or any OTP-based flow, this component gives you full control over the UI and behavior of OTP fields.

📸 Demo

📦 Installation

Install the package using npm or yarn:

yarn add react-native-otp-box-input

OR

npm install react-native-otp-box-input

---

📚 Table of Contents

• Installation
• Demo
• Features
• Usage
• Props
• Author
• License
• Contributing

---

✨ Features

• 🔢 Dynamic OTP input fields (any length)
• ⚡ Auto-focus & intelligent navigation
• 🎨 Custom styling for inputs and container
• 🧩 Plug-and-play usage with advanced customization
• 📱 Works perfectly on both Android and iOS
• 🛠️ Support for placeholder, render customization, and focus callbacks

---

🚀 Usage

A basic example of how to use the component:

import React from 'react';
import { View } from 'react-native';
import OtpInputBox from 'react-native-otp-box-input';

const MyComponent = () => (
  <View>
    <OtpInputBox
      length={6}
      onChangeOtp={(otp) => console.log('Entered OTP:', otp)}
      autoFocus={true}
    />
  </View>
);

---

⚙️ Props

Prop	Type	Default	Description
length	number	Required	Number of OTP input boxes to display
onChangeOtp	(otp: string) => void	Required	Callback that receives the full OTP string as the user types
autoFocus	boolean	false	Automatically focuses the first input when the component mounts
keyboardType	'default', 'numeric', 'number-pad', etc.	'numeric'	Keyboard type for each input box
placeholder	string	undefined	Placeholder text for all input boxes
placeholders	string[]	undefined	Individual placeholders for each input field
style	ViewStyle	undefined	Custom style for the input container
inputStyle	StyleProp<ViewStyle>	undefined	Style for each individual input field
activeInputStyle	StyleProp<ViewStyle>	undefined	Additional style for the currently focused input
renderInput	({ ...props }) => React.ReactNode	undefined	Custom render function to fully override the input UI
inputProps	TextInputProps	{}	Additional props to pass to each TextInput
onInputFocus	(index: number) => void	undefined	Callback when an input field gains focus
onInputBlur	(index: number) => void	undefined	Callback when an input field loses focus

---

👤 Author

Made with ❤️ by Naveed Khan

---

📄 License

This project is licensed under the MIT License.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!
Feel free to open an issue or submit a pull request.

---

🏷 Tags

react-native-otp   otp-input   otp   sms-verification   authentication   react-native-component   typescript