### Install React Native Mask Input

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Instructions for installing the react-native-mask-input library using npm or yarn package managers.

```sh
npm install react-native-mask-input
```

```sh
yarn add react-native-mask-input
```

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

### Clone and Run React Native Mask Input Example

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Provides instructions on how to clone the `react-native-mask-input` project from GitHub and run the example application on Android or iOS devices. This is useful for testing and understanding the library's functionality.

```bash
git clone https://github.com/caioquirinomedeiros/react-native-mask-input.git
cd react-native-mask-input/example
yarn
yarn android / yarn ios
```

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

### Basic Usage of MaskInput Component

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Demonstrates how to use the MaskInput component in a React Native application. It shows how to manage the input value and handle changes, including both the masked and unmasked versions of the input. The example uses a phone number mask pattern.

```javascript
import MaskInput from 'react-native-mask-input';

function MyComponent() {
  const [phone, setPhone] = React.useState('');

  return (
    <MaskInput
      value={phone}
      onChangeText={(masked, unmasked) => {
        setPhone(masked); // you can use the unmasked value as well

        // assuming you typed "9" all the way:
        console.log(masked); // (99) 99999-9999
        console.log(unmasked); // 99999999999
      }}
      mask={['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
    />
  );
}
```

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

### Dynamic Function Masks (React Native)

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

Demonstrates how to use a function to dynamically define the mask based on the input's current value. This example switches between CPF and CNPJ masks based on the number of digits entered.

```tsx
import MaskInput from 'react-native-mask-input';

// CPF mask (11 digits): 000.000.000-00
const CPF_MASK = [
  //d/, //d/, //d/, '.', //d/, //d/, //d/, '.', //d/, //d/, //d/, '-', //d/, //d/
];

// CNPJ mask (14 digits): 00.000.000/0000-00
const CNPJ_MASK = [
  //d/, //d/, '.', //d/, //d/, //d/, '.', //d/, //d/, //d/, '/',
  //d/, //d/, //d/, //d/, '-', //d/, //d/
];

function CpfCnpjInput() {
  const [value, setValue] = React.useState('');

  return (
    <MaskInput
      value={value}
      onChangeText={setValue}
      keyboardType="numeric"
      mask={(text) => {
        // Switch mask based on digit count
        const digits = text?.replace(/\D+/g, '') || '';
        return digits.length <= 11 ? CPF_MASK : CNPJ_MASK;
      }}
    />
  );
}

```

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

### Implement dynamic mask switching

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Demonstrates using a function as the mask prop to dynamically toggle between different mask patterns (e.g., CPF vs CNPJ) based on the input length.

```javascript
import MaskInput from 'react-native-mask-input';

const CPF_MASK = [/\d/, /\d/, /\d/, ".", /\d/, /\d/, /\d/, ".", /\d/, /\d/, /\d/, "-", /\d/, /\d/];
const CNPJ_MASK = [/[a-zA-Z0-9]/, /[a-zA-Z0-9]/, ".", /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, ".", /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, "/", /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, /[a-zA-Z0-9]/, "-", /\d/, /\d/];

function MyComponent() {
  const [value, setValue] = React.useState('');

  return (
    <MaskInput
      value={value}
      onChangeText={setValue}
      mask={(text) => {
        if (text.replace(/\D+/g, "").length <= 11) {
          return CPF_MASK;
        } else {
          return CNPJ_MASK;
        }
      }}
    />
  );
}
```

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

### Implement Full-Featured Masked Input in React Native

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

Demonstrates the usage of the MaskInput component with custom mask patterns, obfuscation settings, and placeholder customization. It handles state management through the onChangeText callback, providing access to masked, unmasked, and obfuscated values.

```tsx
import MaskInput from 'react-native-mask-input';

function FullFeaturedInput() {
  const [value, setValue] = React.useState('');

  return (
    <MaskInput
      value={value}
      onChangeText={(masked, unmasked, obfuscated) => {
        setValue(unmasked);
      }}
      mask={[/d/, /d/, '/', /d/, /d/, '/', /d/, /d/, /d/, /d/]}
      showObfuscatedValue={false}
      obfuscationCharacter="*"
      placeholderFillCharacter="_"
      maskAutoComplete={true}
      keyboardType="numeric"
      style={{ borderWidth: 1, padding: 12 }}
      autoCapitalize="none"
    />
  );
}
```

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

### Define a static mask pattern

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Demonstrates how to create a mask array using RegEx for digits and static characters. This pattern ensures input follows a specific format, such as a Zip Code.

```javascript
const zipCodeMask = [/\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/];
```

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

### Format Text with Masks Programmatically in React Native

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Demonstrates the use of the `formatWithMask` utility function to format text according to a specified mask, including options for obfuscation. This is useful for pre-formatting data or for use outside of direct input components.

```javascript
import { formatWithMask, Masks } from 'react-native-mask-input';

const creditCard = '9999999999999999';

const { masked, unmasked, obfuscated } = formatWithMask({
  text: creditCard,
  mask: Masks.CREDIT_CARD,
  obfuscationCharacter: '-',
});

console.log(masked); // 9999 9999 9999 9999
console.log(unmasked); // 9999999999999999
console.log(obfuscated); // 9999 ---- ---- 9999
```

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

### Create Custom Number Masks for Currency Input in React Native

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Explains how to use the `createNumberMask` helper function to generate dynamic masks for numerical inputs, particularly useful for currency formatting. It allows customization of prefixes, delimiters, separators, and decimal precision.

```javascript
import MaskInput, { createNumberMask } from 'react-native-mask-input';

const dollarMask = createNumberMask({
  prefix: ['R', '$', ' '],
  delimiter: '.',
  separator: ',',
  precision: 2,
})

function MyComponent() {
  const [value, setValue] = React.useState('');

  return (
    <MaskInput
      value={value}
      mask={dollarMask}
      onChangeText={(masked, unmasked) => {
        setValue(unmasked); // you can use the masked value as well

        // assuming you typed "123456":
        console.log(masked); // "R$ 1.234,56"
        console.log(unmasked); // "123456"
      }}
    />
  );
}
```

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

### Create dynamic number masks with createNumberMask

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

The createNumberMask helper generates mask configurations for currency and numeric inputs. It supports customization of prefixes, delimiters, decimal separators, and precision.

```typescript
import MaskInput, { createNumberMask } from 'react-native-mask-input';

const dollarMask = createNumberMask({
  prefix: ['$'],
  delimiter: ',',
  separator: '.',
  precision: 2,
});

function CurrencyInput() {
  const [value, setValue] = React.useState('');

  return (
    <MaskInput
      value={value}
      mask={dollarMask}
      keyboardType="numeric"
      onChangeText={(masked, unmasked) => {
        setValue(unmasked);
      }}
    />
  );
}
```

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

### Format text manually with mask

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Shows how to use the formatWithMask utility function to transform raw text into masked, unmasked, and obfuscated formats outside of a component context.

```javascript
import { formatWithMask } from 'react-native-mask-input';

const { masked, unmasked, obfuscated } = formatWithMask({
  text: '71680345',
  mask: zipCodeMask,
});

console.log(masked); // "71680-345"
console.log(unmasked); // "71680345"
console.log(obfuscated); // "71680-345"
```

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

### Obfuscate Input Values with Custom Masks in React Native

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Demonstrates how to use a custom RegExp array for masking and obfuscating input values in React Native. It utilizes the `showObfuscatedValue` prop and `obfuscationCharacter` to control the display of sensitive information.

```javascript
const creditCardMask = [/d/, /\d/, /\d/, /\d/, " " [/d/], [/d/], [/d/], [/d/], " ", [/d/], [/d/], [/d/], [/d/], " ", /d/, /d/, /d/, /d/];

function MyComponent() {
  const [creditCard, setCreditCard] = React.useState('');

  return (
    <MaskInput
      value={creditCard}
      mask={creditCardMask}
      showObfuscatedValue
      obfuscationCharacter="#"
      onChangeText={(masked, unmasked, obfuscated) => {
        setCreditCard(unmasked); // you can use the masked value as well

        // assuming you typed "1234123412341234":
        console.log(masked); // "1234 1234 1234 1234"
        console.log(unmasked); // "1234123412341234"
        console.log(obfuscated); // "1234 #### #### 1234"
      }}
    />
  );
}
```

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

### Utilize Predefined Masks for Common Inputs in React Native

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Shows how to leverage the `Masks` object from `react-native-mask-input` to apply common, predefined masks to input fields. This simplifies the implementation for use cases like credit cards, phone numbers, and dates.

```javascript
import MaskInput, { Masks } from 'react-native-mask-input';

function MyComponent() {
  const [creditCard, setCreditCard] = React.useState('');

  return (
    <MaskInput
      value={creditCard}
      onChangeText={setCreditCard}
      mask={Masks.CREDIT_CARD}
    />
  );
}
```

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

### Custom Mask Definitions (React Native)

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

Illustrates how to define custom masks for inputs like zip codes and credit card numbers using arrays of characters and regular expressions. It also shows how to use array wrapping for obfuscation of sensitive data.

```tsx
import MaskInput from 'react-native-mask-input';

// Zip code mask: 5 digits, dash, 3 digits
const zipCodeMask = [//d/, //d/, //d/, //d/, //d/, '-', //d/, //d/, //d/];

// Credit card mask with obfuscation (middle digits hidden)
// Wrapping RegExp in array marks it for obfuscation
const creditCardMask = [
  //d/, //d/, //d/, //d/, ' ',
  [//d/], [//d/], [//d/], [//d/], ' ',
  [//d/], [//d/], [//d/], [//d/], ' ',
  //d/, //d/, //d/, //d/
];

function CreditCardInput() {
  const [card, setCard] = React.useState('');

  return (
    <MaskInput
      value={card}
      mask={creditCardMask}
      showObfuscatedValue
      obfuscationCharacter="#"
      onChangeText={(masked, unmasked, obfuscated) => {
        setCard(unmasked);
        // When user types "1234567890123456":
        // masked: "1234 5678 9012 3456"
        // unmasked: "1234567890123456"
        // obfuscated: "1234 #### #### 3456"
      }}
      keyboardType="numeric"
    />
  );
}

```

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

### Use Masked Input Props Hook in React Native

Source: https://github.com/caioquirinomedeiros/react-native-mask-input/blob/main/README.md

Demonstrates how to use the `useMaskedInputProps` hook from `react-native-mask-input` to manage input values and apply masks. This hook simplifies the integration of masked input fields in React Native applications, particularly when used with UI libraries like `native-base`. It takes an options object including `value`, `onChangeText`, and `mask`.

```javascript
import { Input } from 'native-base'
import { Masks } from 'react-native-mask-input';

function MyComponent() {
  const [phone, setPhone] = React.useState('');

  const maskedInputProps = useMaskedInputProps({
    value: phone,
    onChangeText: setPhone,
    mask: Masks.BRL_PHONE,
  });

  return <Input {...maskedInputProps} />
}
```

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

### Phone Input Component with MaskInput (React Native)

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

Demonstrates how to use the MaskInput component to create a phone number input field with a specific mask format. It shows how to handle masked, unmasked, and obfuscated values.

```tsx
import * as React from 'react';
import MaskInput, { Masks } from 'react-native-mask-input';

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

  return (
    <MaskInput
      value={phone}
      onChangeText={(masked, unmasked, obfuscated) => {
        setPhone(masked);
        // When user types "9999999999":
        // masked: "(99) 99999-9999"
        // unmasked: "9999999999"
        // obfuscated: "(99) 99999-9999"
      }}
      mask={['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
      keyboardType="numeric"
      placeholder="(00) 00000-0000"
      placeholderFillCharacter="0"
    />
  );
}

```

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

### Format text programmatically with formatWithMask

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

The formatWithMask function allows for standalone text formatting outside of input components. It accepts an input string and a mask definition, returning an object containing the masked, unmasked, and optionally obfuscated strings.

```typescript
import { formatWithMask, Masks } from 'react-native-mask-input';

const creditCardResult = formatWithMask({
  text: '9999999999999999',
  mask: Masks.CREDIT_CARD,
  obfuscationCharacter: '*',
});
console.log(creditCardResult.masked);
console.log(creditCardResult.unmasked);
console.log(creditCardResult.obfuscated);

const phoneResult = formatWithMask({
  text: '4155550132',
  mask: Masks.USA_PHONE,
});

const dateResult = formatWithMask({
  text: '1510',
  mask: Masks.DATE_DDMMYYYY,
  maskAutoComplete: true,
});
```

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

### Utilize predefined masks

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

The library provides a collection of common masks via the Masks object, including formats for phone numbers, dates, CPF/CNPJ, and credit cards. These can be passed directly to the MaskInput component or used with formatWithMask.

```typescript
import MaskInput, { Masks } from 'react-native-mask-input';

function App() {
  const [date, setDate] = React.useState('');

  return (
    <MaskInput
      value={date}
      mask={Masks.DATE_MMDDYYYY}
      onChangeText={setDate}
      keyboardType="numeric"
      maskAutoComplete
    />
  );
}
```

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

### Integrate masks with useMaskedInputProps hook

Source: https://context7.com/caioquirinomedeiros/react-native-mask-input/llms.txt

The useMaskedInputProps hook returns the necessary props to apply masking to any TextInput-compatible component. This is ideal for integrating with third-party UI libraries or custom input components.

```typescript
import * as React from 'react';
import { TextInput } from 'react-native';
import { useMaskedInputProps, Masks } from 'react-native-mask-input';

function CustomPhoneInput() {
  const [phone, setPhone] = React.useState('');

  const maskedInputProps = useMaskedInputProps({
    value: phone,
    onChangeText: setPhone,
    mask: Masks.BRL_PHONE,
    placeholderFillCharacter: '0',
  });

  return (
    <TextInput
      {...maskedInputProps}
      keyboardType="numeric"
      style={{ borderWidth: 1, padding: 12, fontSize: 18 }}
    />
  );
}
```

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