react-native-otp-fields/README.md

A customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.

# react-native-otp-fields

A simple and customizable **React Native OTP input component** with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.

![npm](https://img.shields.io/npm/v/react-native-otp-fields?color=brightgreen)
![license](https://img.shields.io/npm/l/react-native-otp-fields)
![downloads](https://img.shields.io/npm/dm/react-native-otp-fields)

---

## 📦 Installation

### Using npm
```sh
npm install react-native-otp-fields
```

### Using Yarn
```
yarn add react-native-otp-fields
```

### 🚀 Usage
```
import React from 'react';
import { View } from 'react-native';
import OtpInput from 'react-native-otp-fields';

export default function App() {
  return (
    <View style={{ marginTop: 50 }}>
      <OtpInput
        length={6}
        onOtpComplete={(code) => console.log('Entered OTP:', code)}
      />
    </View>
  );
}
```

### ⚙️ Props
| Prop             | Type       | Default | Description                               |
| ---------------- | ---------- | ------- | ----------------------------------------- |
| `length`         | `number`   | `6`     | Number of OTP input fields                |
| `onOtpComplete`  | `function` | —       | Callback fired when all fields are filled |
| `inputStyle`     | `object`   | —       | Custom style for each input box           |
| `containerStyle` | `object`   | —       | Custom style for container                |

### 🎨 Custom Styling Example
```
<OtpInput
  length={4}
  onOtpComplete={(code) => console.log(code)}
  inputStyle={{
    borderWidth: 2,
    borderColor: '#4CAF50',
    borderRadius: 10,
    fontSize: 22,
    color: '#4CAF50',
  }}
  containerStyle={{
    justifyContent: 'center',
    marginVertical: 20,
  }}
/>
```