### Basic OTP Input Setup

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/OtpInput.md

A basic example of setting up the OtpInput component with a specified number of digits and handling text changes and completion.

```typescript
import { OtpInput } from "react-native-otp-entry";
import { useState } from "react";
import { View, Text } from "react-native";

export function BasicOtpScreen() {
  const [otp, setOtp] = useState("");

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, marginBottom: 20 }}>Enter 6-digit OTP</Text>
      <OtpInput
        numberOfDigits={6}
        onTextChange={(text) => setOtp(text)}
        onFilled={(text) => console.log(`OTP filled: ${text}`)}
      />
      <Text style={{ marginTop: 20 }}>Current OTP: {otp}</Text>
    </View>
  );
}
```

--------------------------------

### Install react-native-otp-entry

Source: https://github.com/anday013/react-native-otp-entry/blob/main/README.MD

Install the react-native-otp-entry package using npm or yarn.

```bash
npm install react-native-otp-entry

# or

yarn add react-native-otp-entry
```

--------------------------------

### Install react-native-otp-entry

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Install the library using npm. It has zero external dependencies beyond React and React Native.

```bash
npm install react-native-otp-entry
```

--------------------------------

### Consumer Import Example

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Shows how consumers should import components and types from the library's primary entry point.

```typescript
import { OtpInput, OtpInputProps, Theme, OtpInputRef } from "react-native-otp-entry";
```

--------------------------------

### Styled Component Example

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Demonstrates how to apply custom styling to the OtpInput component using the theme prop.

```typescript
<OtpInput theme={{ containerStyle: { gap: 10 } }} />
```

--------------------------------

### Complete OTP Input Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/configuration.md

This example demonstrates a comprehensive configuration of the OtpInput component, including styling, input type, focus behavior, and button controls for clearing and enabling/disabling the input.

```typescript
import { OtpInput } from "react-native-otp-entry";
import { useRef, useState } from "react";
import { View, StyleSheet, Button } from "react-native";

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: "#f9f9f9",
  },
  otpContainer: {
    gap: 12,
    justifyContent: "center",
  },
  pinCodeContainer: {
    borderWidth: 2,
    borderColor: "#e0e0e0",
    borderRadius: 10,
    height: 55,
    width: 45,
    backgroundColor: "#fff",
  },
  focusedPinCodeContainer: {
    borderColor: "#2196F3",
    backgroundColor: "#e3f2fd",
  },
  filledPinCodeContainer: {
    borderColor: "#4CAF50",
  },
  disabledPinCodeContainer: {
    backgroundColor: "#f0f0f0",
    opacity: 0.5,
  },
  pinCodeText: {
    fontSize: 22,
    fontWeight: "600",
    color: "#333",
  },
  placeholderText: {
    fontSize: 18,
    color: "#bbb",
  },
  focusStick: {
    width: 3,
    height: 32,
  },
});

export function CompleteOtpConfiguration() {
  const otpRef = useRef(null);
  const [otp, setOtp] = useState("");
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <View style={styles.container}>
      <OtpInput
        ref={otpRef}
        numberOfDigits={6}
        type="numeric"
        disabled={isDisabled}
        autoFocus={true}
        secureTextEntry={false}
        placeholder="•"
        blurOnFilled={true}
        hideStick={false}
        focusColor="#2196F3"
        focusStickBlinkingDuration={500}
        onTextChange={(text) => setOtp(text)}
        onFilled={(text) => console.log(`OTP: ${text}`)}
        onFocus={() => console.log("Focused")}
        onBlur={() => console.log("Blurred")}
        theme={{
          containerStyle: styles.otpContainer,
          pinCodeContainerStyle: styles.pinCodeContainer,
          focusedPinCodeContainerStyle: styles.focusedPinCodeContainer,
          filledPinCodeContainerStyle: styles.filledPinCodeContainer,
          disabledPinCodeContainerStyle: styles.disabledPinCodeContainer,
          pinCodeTextStyle: styles.pinCodeText,
          placeholderTextStyle: styles.placeholderText,
          focusStickStyle: styles.focusStick,
        }}
        textInputProps={{
          accessibilityLabel: "One-Time Password",
          testID: "otp-input",
        }}
        textProps={{
          accessibilityRole: "text",
          accessibilityLabel: "OTP digit",
          allowFontScaling: false,
        }}
      />
      <Button title="Clear" onPress={() => otpRef.current?.clear()} />
      <Button
        title={isDisabled ? "Enable" : "Disable"}
        onPress={() => setIsDisabled(!isDisabled)}
      />
    </View>
  );
}
```

--------------------------------

### Basic OtpInput Component Usage

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Demonstrates the basic setup of the OtpInput component with a specified number of digits and an onFilled callback.

```typescript
import { OtpInput } from "react-native-otp-entry";

export function MyComponent() {
  return (
    <OtpInput
      numberOfDigits={6}
      onFilled={(otp) => console.log(otp)}
    />
  );
}
```

--------------------------------

### Basic Usage Example with useOtpInput

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/useOtpInput.md

Demonstrates how to use the useOtpInput hook with common props like numberOfDigits, type, and callbacks. Includes programmatic control of input value and focus.

```typescript
import { useOtpInput } from "react-native-otp-entry";
import { OtpInputProps } from "react-native-otp-entry";

const myProps: OtpInputProps = {
  numberOfDigits: 6,
  type: "numeric",
  onTextChange: (text) => console.log(`Current: ${text}`),
  onFilled: (text) => console.log(`Complete: ${text}`),
};

const { 
  models: { text, inputRef, focusedInputIndex, isFocused, placeholder },
  actions: { clear, focus, blur, handleTextChange },
  forms: { setTextWithRef }
} = useOtpInput(myProps);

// Later in your component:
console.log(`Current text: ${text}`);
console.log(`Currently focused at index: ${focusedInputIndex}`);

// Set value programmatically
setTextWithRef("123456");

// Clear the input
clear();

// Control keyboard
focus();
blur();

```

--------------------------------

### Minimal OTP Input Example

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

A basic implementation of the OtpInput component with a specified number of digits and an onFilled callback.

```typescript
import { OtpInput } from "react-native-otp-entry";

export function MyScreen() {
  return (
    <OtpInput
      numberOfDigits={6}
      onFilled={(otp) => console.log(`OTP: ${otp}`)}
    />
  );
}
```

--------------------------------

### Ref Control Example

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Shows how to control the OtpInput component using a ref, including clearing the input.

```typescript
const otpRef = useRef<OtpInputRef>(null);
<OtpInput ref={otpRef} />
otpRef.current?.clear();
```

--------------------------------

### Accessibility Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Provides examples of how to configure accessibility props for the OtpInput component and its text elements.

```typescript
<OtpInput
  textInputProps={{
    accessibilityLabel: "One-Time Password",
  }}
  textProps={{
    accessibilityRole: "text",
    accessibilityLabel: "OTP digit",
  }}
/>
```

--------------------------------

### useOtpInput Hook Usage Example

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/useOtpInput.md

Demonstrates how to import and use the useOtpInput hook in a React Native component, including prop configuration and accessing returned models, actions, and forms.

```APIDOC
## useOtpInput Hook Usage Example

This section provides a practical example of how to integrate the `useOtpInput` hook into your React Native application.

### Description

Import the hook and define the necessary props for OTP input configuration. The hook returns models for state, actions for controlling the input, and forms for programmatic manipulation.

### Usage

```typescript
import { useOtpInput } from "react-native-otp-entry";
import { OtpInputProps } from "react-native-otp-entry";

const myProps: OtpInputProps = {
  numberOfDigits: 6,
  type: "numeric",
  onTextChange: (text) => console.log(`Current: ${text}`),
  onFilled: (text) => console.log(`Complete: ${text}`),
};

const {
  models: { text, inputRef, focusedInputIndex, isFocused, placeholder },
  actions: { clear, focus, blur, handleTextChange },
  forms: { setTextWithRef }
} = useOtpInput(myProps);

// Later in your component:
console.log(`Current text: ${text}`);
console.log(`Currently focused at index: ${focusedInputIndex}`);

// Set value programmatically
setTextWithRef("123456");

// Clear the input
clear();

// Control keyboard
focus();
blur();
```

### Props (`OtpInputProps`)

- **numberOfDigits** (number): The total number of digits the OTP input should have. (e.g., 6)
- **type** (string): Specifies the allowed input type. Options: "numeric", "alpha", "alphanumeric". (e.g., "numeric")
- **onTextChange** (function): Callback function that is triggered whenever the OTP text changes. Receives the current text as an argument. (e.g., `(text) => console.log(text)`)
- **onFilled** (function): Callback function that is triggered when the OTP input is completely filled. Receives the filled OTP text as an argument. (e.g., `(text) => console.log(text)`)

### Returned Values

#### Models

- **text** (string): The current accumulated OTP input.
- **inputRef** (RefObject): A ref object for the input element.
- **focusedInputIndex** (number): The index of the currently focused input field.
- **isFocused** (boolean): A boolean indicating whether the input has focus.
- **placeholder** (string): The placeholder string for the input fields.

#### Actions

- **clear** (function): Clears the OTP input.
- **focus** (function): Programmatically focuses the input.
- **blur** (function): Programmatically blurs the input.
- **handleTextChange** (function): Handles text changes in the input.

#### Forms

- **setTextWithRef** (function): Sets the OTP input value programmatically using a ref.
```

--------------------------------

### OTP Input with Validation Feedback

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/configuration.md

This example shows how to provide custom validation feedback to the user by combining the 'onTextChange' callback with state management for error messages.

```typescript
const [validationError, setValidationError] = useState("");

<OtpInput
  type="numeric"
  numberOfDigits={6}
  onTextChange={(text) => {
    if (!/^\d*$/.test(text)) {
      setValidationError("Only numbers allowed");
    } else {
      setValidationError("");
    }
  }}
/>

```

--------------------------------

### Focus OTP Input using Ref

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/OtpInput.md

Programmatically focuses the OTP input, bringing up the keyboard. Use this to guide user interaction or to ensure the input is ready for entry.

```typescript
const otpRef = useRef<OtpInputRef>(null);

const handleFocus = () => {
  otpRef.current?.focus();
};

return (
  <>
    <OtpInput ref={otpRef} numberOfDigits={6} />
    <Button title="Focus Input" onPress={handleFocus} />
  </>
);
```

--------------------------------

### Usage Example: VerticalStick with Customizations

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/VerticalStick.md

Demonstrates how to use the VerticalStick component with different props for focus color and blinking duration. Each stick is placed within a styled container for visual separation.

```typescript
import { VerticalStick } from "react-native-otp-entry";
import { View } from "react-native";

export function CursorDemo() {
  return (
    <View style={{ flexDirection: "row", gap: 10, padding: 20 }}>
      {/* Stick with default color and duration */}
      <View style={{ width: 40, height: 60, border: "1px solid black", justifyContent: "center", alignItems: "center" }}>
        <VerticalStick />
      </View>

      {/* Stick with custom focus color */}
      <View style={{ width: 40, height: 60, border: "1px solid black", justifyContent: "center", alignItems: "center" }}>
        <VerticalStick focusColor="#FF6B6B" />
      </View>

      {/* Stick with custom blinking speed (faster) */}
      <View style={{ width: 40, height: 60, border: "1px solid black", justifyContent: "center", alignItems: "center" }}>
        <VerticalStick focusColor="#4CAF50" focusStickBlinkingDuration={250} />
      </View>

      {/* Stick with custom blinking speed (slower) */}
      <View style={{ width: 40, height: 60, border: "1px solid black", justifyContent: "center", alignItems: "center" }}>
        <VerticalStick focusColor="#2196F3" focusStickBlinkingDuration={600} />
      </View>
    </View>
  );
}

```

--------------------------------

### Project Directory Structure

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Illustrates the file organization within the react-native-otp-entry project, highlighting the main entry point, module structure, and test files.

```tree
react-native-otp-entry/
├── src/
│   ├── index.ts                          # Main entry point, re-exports public API
│   ├── index.d.ts                        # TypeScript definitions (legacy format)
│   └── OtpInput/
│       ├── index.ts                      # OtpInput module exports
│       ├── OtpInput.tsx                  # Main OtpInput component (forwardRef wrapper)
│       ├── OtpInput.types.ts             # Type definitions (OtpInputProps, OtpInputRef, Theme)
│       ├── OtpInput.styles.ts            # Default StyleSheet definitions
│       ├── VerticalStick.tsx             # Blinking cursor stick component
│       ├── useOtpInput.ts                # Custom hook for state and logic
│       └── __tests__/
│           ├── OtpInput.test.tsx         # Component integration tests
│           ├── VerticalStick.test.tsx    # Stick animation tests
│           └── useOtpInput.test.ts       # Hook logic tests
├── package.json                          # Package metadata and dependencies
├── tsconfig.json                         # TypeScript configuration
├── tsconfig.prod.json                    # Production build TypeScript config
├── jest.config.ts                        # Test runner configuration
└── babel.config.js                       # Babel transpilation config
```

--------------------------------

### OTP Input with Input Type Filtering (Alphanumeric)

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/OtpInput.md

This example demonstrates how to filter input to accept only alphabetic characters for the OTP, suitable for codes that include letters.

```typescript
import { OtpInput } from "react-native-otp-entry";
import { View, Text } from "react-native";

export function AlphanumericOtpScreen() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ marginBottom: 10 }}>Letters only (6 characters)</Text>
      <OtpInput
        numberOfDigits={6}
        type="alpha"
        onFilled={(code) => console.log(`Code: ${code}`)}
      />
    </View>
  );
}
```

--------------------------------

### Minimal UI Configuration (No Cursor Stick)

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Configure OtpInput for a minimal UI appearance by hiding the cursor stick and removing borders.

```typescript
<OtpInput
  numberOfDigits={6}
  hideStick={true}
  focusColor="transparent"
  theme={{
    pinCodeContainerStyle: {
      borderBottomWidth: 2,
      borderLeftWidth: 0,
      borderRightWidth: 0,
      borderTopWidth: 0,
      borderRadius: 0,
    },
  }}
/>
```

--------------------------------

### focus()

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/OtpInput.md

Programmatically focuses the OTP input, bringing up the keyboard. Accessible via a ref.

```APIDOC
## focus()

Programmatically focuses the OTP input, bringing up the keyboard.

### Example
```typescript
const otpRef = useRef<OtpInputRef>(null);

const handleFocus = () => {
  otpRef.current?.focus();
};

return (
  <>
    <OtpInput ref={otpRef} numberOfDigits={6} />
    <Button title="Focus Input" onPress={handleFocus} />
  </>
);
```
```

--------------------------------

### Direct Module Import (Not Recommended)

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Demonstrates a direct import path for the OtpInput module, which is not the recommended way for consumers to use the library.

```typescript
import { OtpInput, OtpInputProps } from "react-native-otp-entry/dist/OtpInput";
```

--------------------------------

### Basic OtpInput Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/configuration.md

Configure the number of digits, character type, and input behavior like focus and security masking.

```typescript
<OtpInput
  numberOfDigits={6}
  type="numeric"
  disabled={false}
  autoFocus={true}
  secureTextEntry={false}
/>
```

--------------------------------

### Custom Type Hierarchy

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Defines the custom type hierarchy for the OTP input component, including its props, theming capabilities, and ref methods. This structure guides developers on how to configure and interact with the component.

```plaintext
Custom Type Hierarchy
├── OtpInputProps
│   ├── Composition of all config properties
│   ├── Includes theme?: Theme
│   ├── Includes callbacks
│   └── Includes React Native pass-through props
├── Theme
│   ├── Multiple ViewStyle properties
│   ├── Multiple TextStyle properties
│   └── Deprecated inputsContainerStyle
├── OtpInputRef
│   ├── clear: () => void
│   ├── focus: () => void
│   ├── blur: () => void
│   └── setValue: (value: string) => void
└── Internal Types
    └── VerticalStickProps (not exported)
```

--------------------------------

### OtpInput Component Composition

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Demonstrates the composition pattern used in the OtpInput component, showing how it integrates with the useOtpInput hook, extracts props, exposes imperative methods, and renders the UI.

```typescript
export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
  // 1. Pull from hook
  const { models, actions, forms } = useOtpInput(props);

  // 2. Extract props with defaults
  const { numberOfDigits = 6, theme = {}, ... } = props;

  // 3. Expose imperative methods
  useImperativeHandle(ref, () => ({
    clear: actions.clear,
    focus: actions.focus,
    setValue: forms.setTextWithRef,
    blur: actions.blur
  }));

  // 4. Render
  return (
    <View>
      {Array(numberOfDigits).fill(0).map((_, index) => {
        // Render logic with computed styles
      })}
      <TextInput ref={inputRef} ... />
    </View>
  );
});
```

--------------------------------

### Module Entry Point Exports

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Consolidates exports from the OtpInput component and its type definitions within the module.

```typescript
export * from "./OtpInput";
export * from "./OtpInput.types";
```

--------------------------------

### TypeScript Types Import

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Demonstrates how to import type definitions for props, refs, and themes from the library.

```typescript
import type {
  OtpInputProps,
  OtpInputRef,
  Theme,
} from "react-native-otp-entry";
```

--------------------------------

### Parameters

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/useOtpInput.md

Details the parameters accepted by the useOtpInput hook.

```APIDOC
## Parameters

| Parameter | Type | Required | Default | Description |
|-----------|------|----------|---------|-------------|
| props | OtpInputProps | Yes | — | Configuration object containing all OTP input settings. See OtpInput component docs for available properties. |
```

--------------------------------

### OtpInput Interaction Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/configuration.md

Customize placeholder text, blur behavior, cursor visibility, and blinking duration for user interaction.

```typescript
<OtpInput
  placeholder="*"
  blurOnFilled={true}
  hideStick={false}
  focusStickBlinkingDuration={500}
/>
```

--------------------------------

### Applying Custom Styles with Theme in OtpInput

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Demonstrates the correct way to apply custom styles using the theme prop. Ensure the theme object is passed correctly, not spread incorrectly.

```typescript
// Wrong
const styles = { ... };
<OtpInput theme={styles} />  // Not spread, passes whole object

// Right
<OtpInput theme={{ containerStyle: { gap: 10 } }} />
```

--------------------------------

### File Organization

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Shows the directory structure of the library's source code.

```tree
src/
├── index.ts                  # Public entry point
├── OtpInput/
│   ├── OtpInput.tsx         # Main component
│   ├── OtpInput.types.ts    # Type definitions
│   ├── OtpInput.styles.ts   # Default styles
│   ├── useOtpInput.ts       # State management hook
│   ├── VerticalStick.tsx    # Cursor component
│   ├── index.ts             # Module exports
│   └── __tests__/           # Test files
```

--------------------------------

### OtpInput Callback Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/configuration.md

Implement callback functions for text changes, completion, focus, and blur events to manage OTP input state.

```typescript
<OtpInput
  onTextChange={(text) => {
    console.log(`User typed: ${text}`);
    setOtp(text);
  }}
  onFilled={(text) => {
    console.log(`OTP complete: ${text}`);
    submitOtp(text);
  }}
  onFocus={() => console.log("Input focused")}
  onBlur={() => console.log("Input blurred")}
/>
```

--------------------------------

### Ref Methods

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

These methods can be accessed via a ref to programmatically control the OTP Entry component.

```APIDOC
## Ref Methods

### Description
Programmatically control the OTP Entry component using these methods accessed via a ref.

### Methods
- **clear()**: Clears the current input value and resets the component.
- **focus()**: Shows the keyboard and focuses the input field.
- **blur()**: Hides the keyboard and removes focus from the input field.
- **setValue(value: string)**: Sets the input value to the provided string.
```

--------------------------------

### useOtpInput Hook API

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/DELIVERABLES.txt

Documentation for the `useOtpInput` hook, which provides the logic for managing OTP input state and behavior, usable independently or by the `OtpInput` component.

```APIDOC
## useOtpInput Hook

### Description

The `useOtpInput` hook encapsulates the state management and logic for handling OTP input. It can be used to build custom OTP input components or to manage OTP input within a larger form.

### Usage

```jsx
import { useOtpInput } from 'react-native-otp-entry';

function MyCustomOtpInput() {
  const { otp, handleChange, handleFocus, inputRefs } = useOtpInput({
    numberOfInputs: 4,
    // other options...
  });

  // ... render your custom input fields using otp, handleChange, handleFocus, inputRefs

  return (
    <View>
      {/* Example of rendering input fields */}
      {[...Array(4)].map((_, index) => (
        <TextInput
          key={index}
          ref={inputRefs[index]}
          value={otp[index] || ''}
          onChangeText={(text) => handleChange(text, index)}
          onFocus={() => handleFocus(index)}
          // ... other props
        />
      ))}
    </View>
  );
}
```

### Return Values

- **otp** (array): An array of strings, where each string represents the character in the corresponding input field.
- **handleChange** (function): A function to handle text changes in an input field. It takes the new text and the index of the input field as arguments.
- **handleFocus** (function): A function to handle focus events for an input field. It takes the index of the input field as an argument.
- **inputRefs** (object): An object containing references to the individual input elements, allowing for programmatic control (e.g., focusing).
- **clear** (function): A function to clear all OTP input fields.
- **setOtp** (function): A function to programmatically set the OTP value.
```

--------------------------------

### Theme Interface

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/types.md

Interface for customizing the visual appearance of the OtpInput component.

```APIDOC
## Theme Interface

### Description
Interface for customizing the visual appearance of the OtpInput component.

### Fields
- **containerStyle** (ViewStyle) - No - Styles for root View container.
- **inputsContainerStyle** (ViewStyle) - No - **Deprecated.** Use containerStyle.
- **pinCodeContainerStyle** (ViewStyle) - No - Styles for each digit container.
- **filledPinCodeContainerStyle** (ViewStyle) - No - Styles applied when digit has a value.
- **pinCodeTextStyle** (TextStyle) - No - Styles for digit text display.
- **focusStickStyle** (ViewStyle) - No - Styles for the cursor stick.
- **focusedPinCodeContainerStyle** (ViewStyle) - No - Styles applied when digit is focused.
- **disabledPinCodeContainerStyle** (ViewStyle) - No - Styles applied when input is disabled.
- **placeholderTextStyle** (TextStyle) - No - Styles for placeholder text.
```

--------------------------------

### Theme Object

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/OtpInput.md

Customize the appearance of the OTP input component using the `theme` prop.

```APIDOC
## Theme Object

Customize the appearance of the OTP input component using the `theme` prop.

| Property | Type | Description |
|---|---|---|
| containerStyle | ViewStyle | Styles for the root View container holding all digit fields. |
| pinCodeContainerStyle | ViewStyle | Styles for each individual digit container. |
| pinCodeTextStyle | TextStyle | Styles for the text displayed in each digit. |
| focusStickStyle | ViewStyle | Styles for the blinking cursor stick shown in focused field. |
| focusedPinCodeContainerStyle | ViewStyle | Styles applied to a digit container when it has focus. |
| filledPinCodeContainerStyle | ViewStyle | Styles applied to a digit container when it contains a value. |
| disabledPinCodeContainerStyle | ViewStyle | Styles applied to digit containers when the input is disabled. |
| placeholderTextStyle | TextStyle | Styles for placeholder text displayed in empty fields. |
| inputsContainerStyle | ViewStyle | **Deprecated.** Use `containerStyle` instead. |
```

--------------------------------

### Type-Safe Usage of OtpInput

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Demonstrates how to use the OtpInput component with its associated types for props, refs, and themes in a type-safe manner. Ensure correct imports for OtpInputProps, OtpInputRef, and Theme.

```typescript
import { OtpInput, OtpInputProps, OtpInputRef, Theme } from "react-native-otp-entry";
import { useRef } from "react";

// Props type
const otpProps: OtpInputProps = {
  numberOfDigits: 6,
  type: "numeric",
  onFilled: (text) => console.log(text),
};

// Ref type
const otpRef = useRef<OtpInputRef>(null);

// Theme type
const theme: Theme = {
  containerStyle: { gap: 10 },
  pinCodeContainerStyle: { height: 50 },
};

// Usage
<OtpInput
  ref={otpRef}
  {...otpProps}
  theme={theme}
/>
```

--------------------------------

### Basic OtpInput Usage

Source: https://github.com/anday013/react-native-otp-entry/blob/main/README.MD

Render a basic OtpInput component with a specified number of digits and an onTextChange handler.

```jsx
<OtpInput numberOfDigits={6} onTextChange={(text) => console.log(text)} />
```

--------------------------------

### OtpInputProps and Theme

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/types.md

Details the extensive properties available for customizing the OtpInput component, including styling, behavior, and event handling.

```APIDOC
## OtpInputProps and Theme

### OtpInputProps

**Description:** Props for the main `OtpInput` component.

**Fields:**

- **numberOfDigits** (number) - Optional - The total number of digits the OTP input should have. Defaults to 6.
- **autoFocus** (boolean) - Optional - Whether the input should automatically focus on mount. Defaults to true.
- **focusColor** (ColorValue) - Optional - The color of the focus indicator. Defaults to "#A4D0A4".
- **onTextChange** ((text: string) => void) - Optional - Callback function triggered when the OTP text changes.
- **onFilled** ((text: string) => void) - Optional - Callback function triggered when the OTP input is completely filled.
- **onFocus** (() => void) - Optional - Callback function triggered when the input receives focus.
- **onBlur** (() => void) - Optional - Callback function triggered when the input loses focus.
- **blurOnFilled** (boolean) - Optional - Whether to blur the input after it's filled. Defaults to false.
- **hideStick** (boolean) - Optional - Whether to hide the focus stick. Defaults to false.
- **focusStickBlinkingDuration** (number) - Optional - The blinking duration of the focus stick in milliseconds. Defaults to 350.
- **secureTextEntry** (boolean) - Optional - Whether to obscure the input text. Defaults to false.
- **disabled** (boolean) - Optional - Whether the input is disabled. Defaults to false.
- **type** (InputType) - Optional - The type of characters allowed in the input. Defaults to "numeric".
- **placeholder** (string) - Optional - The placeholder text for each digit input. Defaults to undefined.
- **theme** (Theme) - Optional - An object containing various style properties for customizing the appearance of the OTP input and its elements.
- **textInputProps** (TextInputProps) - Optional - Props to be passed directly to the underlying React Native TextInput component.
- **textProps** (TextProps) - Optional - Props to be passed directly to the Text components used for displaying digits.

### Theme Interface

**Description:** Defines the styling theme for the `OtpInput` component.

**Fields:**

- **containerStyle** (ViewStyle) - Optional - Styles for the main container.
- **pinCodeContainerStyle** (ViewStyle) - Optional - Styles for individual digit input containers.
- **filledPinCodeContainerStyle** (ViewStyle) - Optional - Styles for filled digit input containers.
- **focusedPinCodeContainerStyle** (ViewStyle) - Optional - Styles for the focused digit input container.
- **disabledPinCodeContainerStyle** (ViewStyle) - Optional - Styles for disabled digit input containers.
- **pinCodeTextStyle** (TextStyle) - Optional - Styles for the text of the digits.
- **focusStickStyle** (ViewStyle) - Optional - Styles for the focus stick.
- **placeholderTextStyle** (TextStyle) - Optional - Styles for the placeholder text.
```

--------------------------------

### OTP Input with Placeholder

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/OtpInput.md

Shows how to use a placeholder character within the OtpInput component to indicate the input fields.

```typescript
import { OtpInput } from "react-native-otp-entry";
import { View } from "react-native";

export function PlaceholderOtpScreen() {
  return (
    <View style={{ padding: 20 }}>
      <OtpInput
        numberOfDigits={6}
        placeholder="*"
        onFilled={(otp) => console.log(`OTP: ${otp}`)}
      />
    </View>
  );
}
```

--------------------------------

### Component Props

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

These are the props you can pass to the OTP Entry component to configure its behavior and appearance.

```APIDOC
## Component Props

### Description
Configure the OTP Entry component's behavior and appearance using these props.

### Props
- **numberOfDigits** (number) - The total number of digits the OTP input should have.
- **type** (string) - The type of input allowed. Can be "numeric", "alpha", or "alphanumeric".
- **disabled** (boolean) - If true, the input field will be disabled.
- **secureTextEntry** (boolean) - If true, the entered digits will be masked.
- **onTextChange** (function) - Callback function that is triggered whenever the text in the input changes.
- **onFilled** (function) - Callback function that is triggered when the OTP input is completely filled.
- **theme** (object) - An object containing custom styles to theme the component.
```

--------------------------------

### OtpInput Component API

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/DELIVERABLES.txt

Documentation for the OtpInput component, which allows users to input OTP codes. It covers its props, styling, and associated hook.

```APIDOC
## OtpInput Component

### Description

The `OtpInput` component is a core UI element for collecting One-Time Password (OTP) input in React Native applications. It provides a customizable and user-friendly interface for entering OTP codes.

### Props

- **value** (string) - Required - The current value of the OTP input.
- **onChangeText** (function) - Required - Callback function that is called when the text input value changes.
- **numberOfInputs** (number) - Optional - The total number of input fields to display. Defaults to 6.
- **secureTextEntry** (boolean) - Optional - If true, the input characters will be masked. Defaults to false.
- **keyboardType** (string) - Optional - The type of keyboard to display. Common values include 'numeric', 'phone-pad'. Defaults to 'numeric'.
- **containerStyle** (object) - Optional - Styles for the main container of the OTP input fields.
- **inputStyle** (object) - Optional - Styles for each individual input field.
- **focusColor** (string) - Optional - The color of the input field when it is focused.
- **disabled** (boolean) - Optional - If true, the input fields will be disabled. Defaults to false.
- **autoFocus** (boolean) - Optional - If true, the first input field will automatically gain focus when the component mounts. Defaults to false.
- **renderCell** (function) - Optional - A function to render custom cells for each input position.
- **onFilled** (function) - Optional - Callback function that is called when all input fields are filled.

### Example

```jsx
<OtpInput
  value={otpValue}
  onChangeText={setOtpValue}
  numberOfInputs={6}
  onFilled={(filledOtp) => console.log('OTP Filled:', filledOtp)}
/>
```

### Related Hooks

- **useOtpInput**: This hook is used internally by the `OtpInput` component to manage its state and logic. It can also be used independently for more advanced control.
```

--------------------------------

### Default Prop Initialization in Hook

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/IMPLEMENTATION_DETAILS.md

Shows how initial state like `isFocused` is set based on the `autoFocus` prop during hook initialization. These defaults are applied only once at mount time.

```typescript
const [isFocused, setIsFocused] = useState(autoFocus);
```

--------------------------------

### Completion Actions Callback

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Handle actions upon OTP completion, such as asynchronous verification and navigation.

```typescript
<OtpInput
  numberOfDigits={6}
  onFilled={async (otp) => {
    try {
      const result = await verifyOtp(otp);
      if (result.valid) {
        navigateToHome();
      } else {
        showError("Invalid OTP");
      }
    } catch (err) {
      showError(err.message);
    }
  }}
/>
```

--------------------------------

### Primary Entry Point Export

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Defines the main entry point for the library, re-exporting the public API from the OtpInput module.

```typescript
export { OtpInput, OtpInputProps, Theme, OtpInputRef } from "./OtpInput";
```

--------------------------------

### Actions (Event Handlers)

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/useOtpInput.md

Details the action functions returned by the useOtpInput hook for handling user interactions and events.

```APIDOC
### Actions (Event Handlers)

**handlePress()**
```typescript
handlePress: () => void
```

Handles user press on a digit container. Focuses the hidden TextInput if the keyboard is not visible, or dismisses and refocuses it if the keyboard is already visible. This fixes a bug where the keyboard would not appear after being dismissed.

**handleTextChange(value: string)**
```typescript
handleTextChange: (value: string) => void
```

Processes text input changes with validation and callbacks.

**Behavior:**
1. Validates the input against the configured `type` filter (alpha/numeric/alphanumeric)
2. Returns early if validation fails (rejects invalid characters)
3. Returns early if the input is disabled
4. Updates the text state
5. Invokes the `onTextChange` callback with the new value
6. If the value reaches `numberOfDigits`, invokes the `onFilled` callback and optionally blurs the input if `blurOnFilled` is true

**Parameters:**
| Name | Type | Description |
|------|------|-------------|
| value | string | The new text value from the TextInput. |

**clear()**
```typescript
clear: () => void
```

Clears the OTP text by resetting it to an empty string. Does not clear focus state.

**focus()**
```typescript
focus: () => void
```

Programmatically focuses the hidden TextInput, bringing up the keyboard on the target platform.

**blur()**
```typescript
blur: () => void
```

Programmatically blurs the hidden TextInput, hiding the keyboard on the target platform.

**handleFocus()**
```typescript
handleFocus: () => void
```

Handles focus event from the TextInput. Sets `isFocused` to true and invokes the `onFocus` callback if provided.

**handleBlur()**
```typescript
handleBlur: () => void
```

Handles blur event from the TextInput. Sets `isFocused` to false and invokes the `onBlur` callback if provided.
```

--------------------------------

### OtpInputRef Interface

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/types.md

Reference interface for imperative control over the OtpInput component.

```APIDOC
## OtpInputRef Interface

### Description
Reference interface for imperative control over the OtpInput component.

### Methods
- **clear** (() => void) - Function to clear all entered OTP digits.
- **focus** (() => void) - Function to focus the input and show keyboard.
- **setValue** ((value: string) => void) - Function to set OTP value programmatically. Truncates if exceeds numberOfDigits.
- **blur** (() => void) - Function to blur the input and hide keyboard.
```

--------------------------------

### OTP Input Component Ref Methods

Source: https://github.com/anday013/react-native-otp-entry/blob/main/README.MD

The `react-native-otp-entry` component provides several imperative methods through its ref for direct manipulation.

```APIDOC
## OTP Input Component Ref Methods

### Description
These methods allow direct control over the OTP input component's state and focus.

### Methods

#### `clear()`

- **Description**: Clears the current value of the OTP input field.
- **Type**: `() => void`

#### `focus()`

- **Description**: Sets the focus to the OTP input field.
- **Type**: `() => void`

#### `blur()`

- **Description**: Removes focus from the OTP input field.
- **Type**: `() => void`

#### `setValue(value: string)`

- **Description**: Sets a specific string value to the OTP input field.
- **Type**: `(value: string) => void`
- **Parameters**:
  - **value** (string) - Required - The string value to set in the input.
```

--------------------------------

### OtpInput Styling Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/configuration.md

Customize the appearance of the OTP input container and individual digit fields using a theme object.

```typescript
const theme = {
  containerStyle: {
    gap: 10,
    justifyContent: "center",
  },
  pinCodeContainerStyle: {
    borderWidth: 2,
    borderColor: "#e0e0e0",
    borderRadius: 8,
    height: 50,
    width: 40,
  },
};

<OtpInput theme={theme} />
```

--------------------------------

### Controlled Component Usage

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Illustrates how to use OtpInput as a controlled component, managing the OTP state externally.

```typescript
const [otp, setOtp] = useState("");
<OtpInput onTextChange={setOtp} />
```

--------------------------------

### Theme Properties

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Customize the visual appearance of the OTP Entry component using these theme properties.

```APIDOC
## Theme Properties

### Description
Customize the visual appearance of the OTP Entry component by providing styles through the `theme` prop.

### Styles
- **containerStyle** (object) - Styles for the root container of the component.
- **pinCodeContainerStyle** (object) - Styles for each individual digit's container.
- **focusedPinCodeContainerStyle** (object) - Styles for the container of the currently focused digit.
- **filledPinCodeContainerStyle** (object) - Styles for the container of a digit that has been filled.
- **disabledPinCodeContainerStyle** (object) - Styles for the container of a disabled digit.
- **pinCodeTextStyle** (object) - Styles for the text of each digit.
- **placeholderTextStyle** (object) - Styles for the placeholder text.
- **focusStickStyle** (object) - Styles for the focus cursor or 'stick'.
```

--------------------------------

### Import OtpInput Component

Source: https://github.com/anday013/react-native-otp-entry/blob/main/README.MD

Import the OtpInput component from the react-native-otp-entry library.

```javascript
import { OtpInput } from "react-native-otp-entry";
```

--------------------------------

### Placeholder Usage in OtpInput

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Illustrates how to use the placeholder prop. A single character placeholder is repeated for each digit. An empty placeholder will not be displayed.

```typescript
// Good
<OtpInput placeholder="*" />  // Shows * * * * * *

// Also works
<OtpInput placeholder="000000" />  // Shows as-is

// Won't show
<OtpInput placeholder="" />
```

--------------------------------

### Models (State)

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/api-reference/useOtpInput.md

Describes the state variables returned by the useOtpInput hook.

```APIDOC
### Models (State)

**text**
```typescript
text: string
```
The current OTP text value entered by the user. Initially an empty string.

**inputRef**
```typescript
inputRef: React.RefObject<TextInput>
```
Reference to the underlying React Native TextInput component. Used to control focus and blur programmatically.

**focusedInputIndex**
```typescript
focusedInputIndex: number
```
The index of the currently focused digit field. Calculated as the length of the current text (always points to the next unfilled position or the last filled position when complete).

**isFocused**
```typescript
isFocused: boolean
```
Boolean indicating whether the input currently has focus. Initially set to the value of `autoFocus` prop.

**placeholder**
```typescript
placeholder: string | undefined
```
Computed placeholder text. If the input placeholder is a single character, it is repeated `numberOfDigits` times. Otherwise, returns the original placeholder value.
```

--------------------------------

### Test File Organization

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Outlines the location and purpose of test files within the library's source code.

```tree
src/OtpInput/__tests__/
├── OtpInput.test.tsx       # Component integration tests
├── VerticalStick.test.tsx  # Animation tests
└── useOtpInput.test.ts     # Hook logic tests
```

--------------------------------

### PIN Entry Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Configure OtpInput for a 4-digit numeric PIN entry with masked input.

```typescript
<OtpInput
  numberOfDigits={4}
  type="numeric"
  secureTextEntry={true}
  placeholder="•"
  focusColor="#FF6B6B"
  hideStick={false}
/>
```

--------------------------------

### Module Exports from OtpInput.types

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/types.md

Exports key types like OtpInputProps, Theme, and OtpInputRef from the types file.

```typescript
export * from "./OtpInput.types";  // OtpInputProps, Theme, OtpInputRef
```

--------------------------------

### useOtpInput Hook State Management

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/MODULE_STRUCTURE.md

Illustrates the primary state variables, refs, and computed values managed by the custom useOtpInput hook. State updates are triggered by user input or ref methods, and focus events.

```typescript
const [text, setText] = useState("");
const [isFocused, setIsFocused] = useState(autoFocus);

// Ref (not state)
const inputRef = useRef<TextInput>(null);

// Computed values (not state)
const focusedInputIndex = text.length;
const placeholder = useMemo(
  () => (_placeholder?.length === 1 
    ? _placeholder.repeat(numberOfDigits) 
    : _placeholder),
  [_placeholder, numberOfDigits]
);
```

--------------------------------

### Secure Input (PIN) Configuration

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/README.md

Configures OtpInput for secure PIN entry with a specified number of digits and numeric type.

```typescript
<OtpInput
  numberOfDigits={4}
  type="numeric"
  secureTextEntry={true}
/>
```

--------------------------------

### Integration Test for OtpInput Ref clear Method

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

This integration test demonstrates how to interact with the OtpInput component using its ref, specifically checking if the clear method (simulated) correctly resets the input value. Note: Direct ref access in tests might require specific configurations.

```typescript
import { render, fireEvent, waitFor } from "@testing-library/react-native";
import { useRef } from "react";
import { OtpInput, OtpInputRef } from "react-native-otp-entry";

const TestComponent = () => {
  const otpRef = useRef<OtpInputRef>(null);

  return (
    <OtpInput
      ref={otpRef}
      numberOfDigits={6}
      testID="otp-input"
    />
  );
};

describe("OtpInput Ref", () => {
  it("clear clears the input", async () => {
    const { getByTestId } = render(<TestComponent />);
    const hiddenInput = getByTestId("otp-input-hidden");

    fireEvent.changeText(hiddenInput, "123456");
    expect(hiddenInput.props.value).toBe("123456");

    //otpRef.current?.clear() would be called here
    // But accessing ref in test requires different approach
  });
});
```

--------------------------------

### Focus/Blur Handling Callback

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/QUICK_START.md

Manage focus and blur events for the OTP input to dynamically update UI elements, such as borders.

```typescript
const [isFocused, setIsFocused] = useState(false);

<OtpInput
  numberOfDigits={6}
  onFocus={() => setIsFocused(true)}
  onBlur={() => setIsFocused(false)}
  theme={{
    containerStyle: {
      borderWidth: isFocused ? 2 : 1,
      borderColor: isFocused ? "#2196F3" : "#ddd",
    },
  }}
/>
```

--------------------------------

### OtpInputRef Interface

Source: https://github.com/anday013/react-native-otp-entry/blob/main/_autodocs/types.md

Defines the methods available on the OtpInput component's ref for programmatic control.

```APIDOC
## OtpInputRef Interface

**Description:** The ref object for the `OtpInput` component, providing methods for programmatic control.

**Methods:**

- **clear** (() => void): Clears the current value of the OTP input.
- **focus** (() => void): Programmatically sets focus to the OTP input.
- **setValue** ((value: string) => void): Sets the OTP input's value to the provided string.
- **blur** (() => void): Programmatically removes focus from the OTP input.
```