### Clone and Install Dependencies

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Steps to clone the repository and install all project dependencies. This is the initial setup for local development.

```sh
git clone https://github.com/RonasIT/react-native-controlled-input.git
cd react-native-controlled-input
npm install
```

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

### Install CocoaPods for iOS Example

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Install CocoaPods dependencies for the iOS version of the example app. This should be run from the example's ios directory.

```sh
cd example/ios && bundle exec pod install
```

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

### Run Example App

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Start the Metro bundler for the example application. This is used to demonstrate the component during development.

```sh
npm run example
```

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

### Launch Example App on Platform

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Commands to launch the example app on iOS or Android after starting the Metro bundler. Ensure you are in the example directory.

```sh
# iOS
cd example && npx react-native run-ios
```

```sh
# Android
cd example && npx react-native run-android
```

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

### Install @ronas-it/react-native-controlled-input

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/README.md

Use npm to install the library. Requires React Native New Architecture / Fabric.

```sh
npm install @ronas-it/react-native-controlled-input
```

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

### Start Metro Bundler (Monorepo)

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/example/README.md

Starts the Metro bundler specifically for a project within a monorepo structure. Use this command from the repository root.

```sh
npm run start -w react-native-controlled-input-example
```

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

### Start Metro Bundler

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/example/README.md

Starts the Metro JavaScript bundler for React Native development. Run this command from the root of your React Native project.

```sh
npm start
```

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

### Execute CocoaPods Install

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/example/README.md

Installs or updates native dependencies for the iOS project using CocoaPods. Run this command after updating native dependencies or for the first time.

```sh
bundle exec pod install
```

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

### Install CocoaPods Dependencies

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/example/README.md

Installs the necessary dependencies for the iOS project using CocoaPods. This command is typically run once after cloning or updating native dependencies.

```sh
bundle install
```

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

### Basic ControlledInputView Usage

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/README.md

Demonstrates how to use ControlledInputView with state management and basic input filtering. Use the ref to imperatively control focus and blur.

```tsx
import { useRef, useState } from 'react';
import { StyleSheet } from 'react-native';
import {
  ControlledInputView,
  type ControlledInputViewRef,
} from '@ronas-it/react-native-controlled-input';

export function Example() {
  const [value, setValue] = useState('');
  const inputRef = useRef<ControlledInputViewRef>(null);

  return (
    <ControlledInputView
      ref={inputRef}
      value={value}
      onChangeText={(text) => setValue(text.replace(/\d/g, ''))}
      style={styles.input}
      onFocus={() => {}}
      onBlur={() => {}}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16,
    color: '#111',
  },
});
```

```tsx
inputRef.current?.focus();
inputRef.current?.blur();
```

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

### Build Project

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Build the JavaScript output for the project, generating ESM and TypeScript declaration files in the `lib/` directory. This command uses `react-native-builder-bob`.

```sh
npm run build
```

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

### Create Git Commit and Tag for Release

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Commands to create a git commit with a release message and tag, and then push them to the repository. This is part of the release process.

```bash
git commit -m "chore: release v0.18.0"
git push && git push --tags
```

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

### Build and Run iOS App

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/example/README.md

Builds and runs the React Native application on an iOS simulator or device. Ensure Metro is running in a separate terminal.

```sh
npm run ios
```

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

### Props Reference

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

A detailed reference of all available props for the ControlledInputView component, including their types, default values, and descriptions.

```APIDOC
## Props Reference

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | — | Current input value (required). Drives the displayed text. |
| `onChangeText` | `(value: string) => void` | — | Called with the candidate string on every keystroke. Filter and set `value`. |
| `onFocus` | `() => void` | — | Called when the field receives focus. |
| `onBlur` | `() => void` | — | Called when the field loses focus. |
| `onSubmitEditing` | `() => void` | — | Called when the return key is pressed. |
| `placeholder` | `string` | — | Placeholder text shown when the field is empty. |
| `placeholderTextColor` | `ColorValue` | — | Color of the placeholder text. |
| `selectionColor` | `ColorValue` | — | Color of the text cursor and selection highlight. |
| `autoComplete` | `string` | — | Autocomplete hint (e.g. `"email"`, `"password"`, `"one-time-code"`). |
| `autoCapitalize` | `string` | `"sentences"` | `"none"` \| `"sentences"` \| `"words"` \| `"characters"`. |
| `autoCorrect` | `boolean` | `true` | Toggle spell-check / auto-correction. |
| `keyboardType` | `string` | `"default"` | `"number-pad"`, `"phone-pad"`, `"email-address"`, `"decimal-pad"`, etc. |
| `returnKeyType` | `string` | `"default"` | `"done"`, `"next"`, `"search"`, `"send"`, `"go"`, etc. |
| `style` | `StyleProp<ViewStyle & TextStyle>` | — | Layout, text, border, and background styles. |
```

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

### Build and Run Android App

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/example/README.md

Builds and runs the React Native application on an Android device or emulator. Ensure Metro is running in a separate terminal.

```sh
npm run android
```

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

### Basic Styling for ControlledInputView

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Applies layout, text, and border/background styles to the input container. Ensure custom fonts are linked natively.

```tsx
import { StyleSheet } from 'react-native';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

// Supported style properties
const styles = StyleSheet.create({
  input: {
    // Layout
    width: '100%',
    height: 52,
    marginHorizontal: 16,
    flex: 1,

    // Text
    color: '#1a1a1a',
    fontSize: 16,
    fontFamily: 'AlbertSans-Regular', // must be linked natively in Expo

    // Spacing
    paddingHorizontal: 14,
    paddingVertical: 12,

    // Border & background
    borderWidth: 1.5,
    borderRadius: 10,
    borderColor: '#d0d5dd',
    backgroundColor: '#f9fafb',
  },
  focused: {
    borderColor: '#167BF1',
    backgroundColor: '#fff',
  },
});
```

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

### Ref Methods

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/README.md

The controlled input component exposes methods through its ref for programmatic control.

```APIDOC
## Ref Methods

### Description

The controlled input component exposes methods through its ref for programmatic control.

### Methods

- `focus()`: Programmatically focuses the input element.
- `blur()`: Programmatically blurs the input element.
```

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

### Lint and Format Code

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Run linting and type-checking scripts to ensure code quality and correctness. These checks are also performed by pre-commit hooks.

```sh
npm run lint
```

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

### Imperative Methods

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/README.md

The `ControlledInputViewRef` provides imperative access to focus and blur methods for the input component.

```APIDOC
## Imperative Methods

### `focus()`

Programmatically focuses the input field.

### `blur()`

Programmatically blurs the input field.
```

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

### Focus-Aware Styling

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Utilize the `onFocus` and `onBlur` props to conditionally apply styles, manage form field states, or integrate with scroll views that adjust for the keyboard.

```APIDOC
## Focus-Aware Styling with `onFocus` / `onBlur`

Use `onFocus` and `onBlur` to apply conditional styles, track field state in a form, or integrate with custom keyboard-aware scroll views.

```tsx
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

export function FocusStyledInput() {
  const [value, setValue] = useState('');
  const [focused, setFocused] = useState(false);

  return (
    <ControlledInputView
      value={value}
      onChangeText={setValue}
      placeholder="Email address"
      placeholderTextColor="#9ca3af"
      autoComplete="email"
      keyboardType="email-address"
      autoCapitalize="none"
      autoCorrect={false}
      returnKeyType="next"
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={[styles.input, focused && styles.inputFocused]}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#e5e7eb',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 15,
    color: '#111827',
    backgroundColor: '#f9fafb',
  },
  inputFocused: {
    borderColor: '#167BF1',
    backgroundColor: '#fff',
  },
});
```
```

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

### Clean Build Artifacts

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/CONTRIBUTING.md

Remove generated build artifacts from the project. This is useful for ensuring a clean build.

```sh
npm run clean
```

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

### ControlledInputView for Letters Only Input

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Use ControlledInputView to create an input that only accepts letters. Digits are silently rejected without flashing.

```tsx
import { useRef, useState } from 'react';
import { StyleSheet } from 'react-native';
import {
  ControlledInputView,
  type ControlledInputViewRef,
} from '@ronas-it/react-native-controlled-input';

// Only allow letters — digits are silently rejected with no flash
export function LettersOnlyInput() {
  const [value, setValue] = useState('');
  const inputRef = useRef<ControlledInputViewRef>(null);

  return (
    <ControlledInputView
      ref={inputRef}
      value={value}
      placeholder="Letters only…"
      placeholderTextColor="#999"
      autoCapitalize="characters"
      autoCorrect={false}
      returnKeyType="done"
      onChangeText={(text) => setValue(text.replace(/[^a-zA-Z]/g, ''))}
      onFocus={() => console.log('focused')}
      onBlur={() => console.log('blurred')}
      onSubmitEditing={() => inputRef.current?.blur()}
      style={styles.input}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16,
    color: '#111',
    backgroundColor: '#fff',
  },
});
```

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

### Focus-Aware Styling with onFocus and onBlur

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Manages focus state to conditionally apply styles, useful for form validation or visual feedback. Integrates with React Native's state management.

```tsx
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

export function FocusStyledInput() {
  const [value, setValue] = useState('');
  const [focused, setFocused] = useState(false);

  return (
    <ControlledInputView
      value={value}
      onChangeText={setValue}
      placeholder="Email address"
      placeholderTextColor="#9ca3af"
      autoComplete="email"
      keyboardType="email-address"
      autoCapitalize="none"
      autoCorrect={false}
      returnKeyType="next"
      onFocus={() => setFocused(true)}
      onBlur={() => setFocused(false)}
      style={[styles.input, focused && styles.inputFocused]}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#e5e7eb',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 15,
    color: '#111827',
    backgroundColor: '#f9fafb',
  },
  inputFocused: {
    borderColor: '#167BF1',
    backgroundColor: '#fff',
  },
});
```

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

### Format Promo Code Input (ABCD-1234)

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Use this formatter for inputs requiring a specific alphanumeric pattern like promo codes. It ensures only valid characters are accepted and formats them into the desired 'ABCD-1234' structure.

```tsx
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

// Produces "ABCD-1234" format: up to 4 uppercase letters, dash, up to 4 digits
function formatPromoCode(input: string): string {
  let letters = '';
  let digits = '';

  for (const ch of input.toUpperCase()) {
    if (/[A-Z]/.test(ch) && letters.length < 4) {
      letters += ch;
    } else if (/[0-9]/.test(ch) && letters.length === 4 && digits.length < 4) {
      digits += ch;
    }
  }

  return digits.length ? `${letters}-${digits}` : letters;
}

export function PromoCodeInput() {
  const [promoCode, setPromoCode] = useState('');

  return (
    <ControlledInputView
      value={promoCode}
      placeholder="Promo code (ABCD-1234)"
      placeholderTextColor="#666"
      autoCapitalize="characters"
      autoCorrect={false}
      onChangeText={(text) => setPromoCode(formatPromoCode(text))}
      style={styles.input}
    />
  );
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    paddingHorizontal: 12,
    fontSize: 16,
    color: '#111',
  },
});
```

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

### Format Card Expiry Date Input (MM/YY)

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Ideal for inputs like expiry dates where separators are auto-inserted and month validation is crucial. This formatter ensures only valid month digits (01-12) are accepted.

```tsx
import { useState } from 'react';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

// Produces "MM/YY"; only valid month digits (01-12) are accepted
function formatExpiry(input: string): string {
  const raw = input.replace(/\D/g, '');
  let digits = '';

  for (let i = 0; i < raw.length && digits.length < 4; i++) {
    const next = digits + raw[i];

    if (next.length <= 2) {
      const m = next;
      if (m.length === 1 && m !== '0' && m !== '1') continue;
      if (m.length === 2 && (Number(m) < 1 || Number(m) > 12)) continue;
    }

    digits = next;
  }

  if (!digits.length) return '';
  const month = digits.slice(0, 2);
  const year  = digits.slice(2, 4);
  return year ? `${month}/${year}` : month;
}

export function ExpiryInput() {
  const [expiry, setExpiry] = useState('');

  return (
    <ControlledInputView
      value={expiry}
      placeholder="MM/YY"
      keyboardType="number-pad"
      placeholderTextColor="#666"
      onChangeText={(text) => setExpiry(formatExpiry(text))}
      style={{ height: 48, borderWidth: 1, borderRadius: 8, paddingHorizontal: 12, fontSize: 16 }}
    />
  );
}
```

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

### ControlledInputView Ref API for Focus/Blur Control

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Utilize the imperative ref API of ControlledInputView to programmatically focus or blur the input field. This integrates with React Native's TextInputState for proper focus tracking.

```tsx
import { useRef } from 'react';
import { Button, View } from 'react-native';
import {
  ControlledInputView,
  type ControlledInputViewRef,
} from '@ronas-it/react-native-controlled-input';

export function FocusControlExample() {
  const inputRef = useRef<ControlledInputViewRef>(null);

  return (
    <View style={{ gap: 12, padding: 20 }}>
      <ControlledInputView
        ref={inputRef}
        value=""
        onChangeText={() => {}}
        placeholder="Tap a button to focus/blur"
        style={{ height: 48, borderWidth: 1, borderRadius: 8, paddingHorizontal: 12 }}
      />
      <Button title="Focus input" onPress={() => inputRef.current?.focus()} />
      <Button title="Blur input"  onPress={() => inputRef.current?.blur()} />
    </View>
  );
}
```

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

### Styling ControlledInputView

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

ControlledInputView accepts standard React Native View styles. Text-related styles are applied to the internal text field, while others apply to the container. Border and background styles are handled differently on Android.

```APIDOC
## Styling

`ControlledInputView` accepts the same `style` prop as a React Native `View`. Both cross-platform layout styles and text/decoration styles are supported. Internally, text-related styles (`color`, `fontSize`, `fontFamily`) are split off and forwarded to the native text field separately; the rest apply to the container view. On Android, border and background styles are also handled via the Compose layer.

```tsx
import { StyleSheet } from 'react-native';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

// Supported style properties
const styles = StyleSheet.create({
  input: {
    // Layout
    width: '100%',
    height: 52,
    marginHorizontal: 16,
    flex: 1,

    // Text
    color: '#1a1a1a',
    fontSize: 16,
    fontFamily: 'AlbertSans-Regular', // must be linked natively in Expo

    // Spacing
    paddingHorizontal: 14,
    paddingVertical: 12,

    // Border & background
    borderWidth: 1.5,
    borderRadius: 10,
    borderColor: '#d0d5dd',
    backgroundColor: '#f9fafb',
  },
  focused: {
    borderColor: '#167BF1',
    backgroundColor: '#fff',
  },
});
```
```

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

### ControlledInputView Component

Source: https://github.com/ronasit/react-native-controlled-input/blob/main/README.md

The ControlledInputView component is a custom input field that allows for precise control over input formatting and validation in JavaScript, preventing intermediate invalid states from flashing in the UI.

```APIDOC
## Component: ControlledInputView

### Description
A controlled React Native input component that synchronizes displayed text with the JS-driven value, preventing intermediate invalid characters from appearing.

### Props

| Prop | Type | Description |
|---|---|---|
| `value` | `string` | Current input value. |
| `onChangeText` | `(value: string) => void` | Callback function that receives the next text value. It's recommended to filter and validate the text here before updating the state. |
| `onFocus` | `() => void` | Callback function invoked when the input field gains focus. |
| `onBlur` | `() => void` | Callback function invoked when the input field loses focus. |
| `onSubmitEditing` | `() => void` | Callback function invoked when the text input is blurred. |
| `autoComplete` | `string` | Specifies autocomplete hints for the system. Refer to React Native `TextInput` documentation for available options. |
| `autoCapitalize` | `string` | Controls auto-capitalization. Can be `none`, `sentences`, `words`, `characters`. Refer to React Native `TextInput` documentation. |
| `autoCorrect` | `boolean` (default `true`) | Toggles the auto-correct feature. |
| `keyboardType` | `string` | Determines the type of keyboard to display (e.g., `numeric`). Refer to React Native `TextInput` documentation. |
| `returnKeyType` | `string` | Determines the appearance of the return key on the keyboard. Refer to React Native `TextInput` documentation. |
| `placeholder` | `string` | Text displayed when the input is empty. |
| `placeholderTextColor` | `ColorValue` | The color of the placeholder text. |
| `selectionColor` | `ColorValue` | The color of the text selection and cursor. |

### Style Support

Supports standard React Native `TextInput` styling properties, including layout, font, and border properties. Common styles like `color`, `fontSize`, `padding`, `margin`, `width`, `height`, `borderWidth`, and `borderRadius` are supported.
```

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

### Format Phone Number Input (+1 (234) 567-89-01)

Source: https://context7.com/ronasit/react-native-controlled-input/llms.txt

Handles phone number formatting, including the '+' prefix and country code. It explicitly manages backspace behavior to ensure correct reformatting when digits are deleted.

```tsx
import { useState } from 'react';
import { ControlledInputView } from '@ronas-it/react-native-controlled-input';

// Produces "+1 (234) 567-89-01"
function formatPhone(input: string): string {
  const digits = input.replace(/\D/g, '').slice(0, 11);

  if (!digits.length) return input.includes('+') ? '+' : '';

  let result = `+${digits[0]}`;
  if (digits.length > 1) result += ` (${digits.slice(1, 4)}`;
  if (digits.length >= 4) result += ')';
  if (digits.length > 4) result += ` ${digits.slice(4, 7)}`;
  if (digits.length > 7) result += `-${digits.slice(7, 9)}`;
  if (digits.length > 9) result += `-${digits.slice(9, 11)}`;

  return result;
}

export function PhoneInput() {
  const [phone, setPhone] = useState('');

  const handlePhoneChange = (text: string) => {
    setPhone((prev) => {
      const prevDigits = prev.replace(/\D/g, '');
      const nextDigits = text.replace(/\D/g, '');

      // Detect separator-position backspace and strip the last real digit
      if (text.length < prev.length && nextDigits === prevDigits && prevDigits.length > 0) {
        return formatPhone(prevDigits.slice(0, -1));
      }

      return formatPhone(text);
    });
  };

  return (
    <ControlledInputView
      value={phone}
      placeholder="+1 (___) ___-__-__"
      keyboardType="phone-pad"
      placeholderTextColor="#666"
      onChangeText={handlePhoneChange}
      style={{ height: 48, borderWidth: 1, borderRadius: 8, paddingHorizontal: 12, fontSize: 16 }}
    />
  );
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.