This is 🔥! Here's a slightly polished version of your README.md to make it even more professional, organized, and consistent with open-source package standards — while keeping your original vibe.

---

1# react-native-otp-manager 🔢
2
3🚀 **Fast, Smooth, and Lag-Free OTP Input for React Native**
4
5---
6
7## 📦 Overview
8
9`react-native-otp-manager` is a lightweight, fully customizable OTP input component for React Native. Designed with performance and UX in mind, it provides a smooth OTP entry experience without lags — perfect for mobile verification flows.
10
11---
12
13## ✨ Features
14
15- ✅ Smooth & Lag-Free Input
16- 🎨 Fully Customizable UI & Styles
17- 🔐 Secure Entry Support
18- ⚡ OTP Autofill & AutoFocus
19- 🌓 Dark Mode Ready
20- 💯 Built with TypeScript
21- ✅ Works with both **React Native CLI** & **Expo**
22
23---
24
25## 📥 Installation
26
27### With npm
28
29```bash
30npm install react-native-otp-manager

With yarn

1yarn add react-native-otp-manager

---

🚀 Usage

Basic Example

1import React from "react";
2import { View } from "react-native";
3import OTPManager from "react-native-otp-manager";
4
5const App = () => {
6  const handleComplete = (otp: string) => {
7    console.log("Entered OTP:", otp);
8  };
9
10  return (
11    <View>
12      <OTPManager maxLength={6} onComplete={handleComplete} />
13    </View>
14  );
15};
16
17export default App;

---

🧩 Props

Prop	Type	Description	Default
maxLength	number	Number of OTP digits	4
onComplete	(code: string) => void	Called when all digits are filled	undefined
onChange	(code: string) => void	Called whenever input value changes	undefined
containerStyle	ViewStyle	Styles for the outer wrapper	undefined
inputWrapperStyle	ViewStyle	Styles for the input row wrapper	undefined
digitStyle	ViewStyle	Styles for each digit input box	undefined
digitTextStyle	TextStyle	Styles for the digit text	undefined
focusedDigitStyle	ViewStyle	Styles when a digit input is focused	undefined
cursorStyle	TextStyle	Custom styles for the blinking cursor	undefined
secureTextEntry	boolean	Hide digits like passwords	false
placeholderChar	string	Placeholder symbol for empty digits	""
autoFocus	boolean	Autofocus the OTP field on mount	true

---

🎨 Custom Styling

Easily control the look of the OTP boxes to match your branding.

Example with Custom Styles

1<OTPManager
2  maxLength={6}
3  onComplete={(otp) => console.log("OTP:", otp)}
4  containerStyle={{ marginTop: 20 }}
5  digitStyle={{ borderColor: "#FF5733", backgroundColor: "#FFF0F0" }}
6  digitTextStyle={{ color: "#FF5733", fontWeight: "600" }}
7  focusedDigitStyle={{ borderColor: "#FFC300", backgroundColor: "#FFFBE6" }}
8  cursorStyle={{ color: "#FFC300" }}
9  placeholderChar="-"
10  secureTextEntry={false}
11/>

---

💡 Tips

• Use secureTextEntry for hiding OTP input like PINs.
• You can reset the input manually using a ref (exposed via reset()).
• Fully works in dark/light themes.

---

🤝 Contributing

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

---

🧪 License

MIT License

---

Made with ❤️ by Dev Yousuf