react-native-mask-input

A mask is an array where each item defines one character of the value.

• Use a string for static characters (e.g., '-', ' ', '(').
• Use a RegExp for characters that the user inputs (e.g., /\d/ for digits).

Note: All characters intended to be input by the user must be a RegExp in your mask array.

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

You can install the library using npm or yarn:

npm install react-native-mask-input

yarn add react-native-mask-input

A Mask is a collection of MaskItems that define how text should be formatted. A Mask can be represented in two ways:

1. A MaskArray: An array of MaskItems where each item is a string, a RegExp, or a tuple containing a RegExp (e.g., [RegExp]).
2. A function: A function that accepts an optional value string and returns a MaskArray.

// Example of a MaskArray
const mask: Mask = ['9', '9', '/', '9', '9'];

// Example of a function mask
const dynamicMask: Mask = (value) => {
  if (value?.length > 2) return ['9', '9', '9'];
  return ['9', '9'];
};

The MaskInput component is a wrapper around the standard React Native TextInput. It requires a value and an onChangeText callback. The mask prop defines the input pattern using an array of strings (for static characters) and RegExp (for character validation).

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

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

  return (
    <MaskInput
      value={phone}
      onChangeText={(masked, unmasked) => {
        setPhone(masked); 
        // masked: (99) 99999-9999
        // unmasked: 99999999999
      }}
      mask={['(', /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
    />
  );
}

The mask prop can accept a function instead of an array. This function receives the current text as an argument and should return a Mask array. This is useful for switching masks dynamically based on the input length or content (e.g., switching between CPF and CNPJ masks).

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]/, "-", /\d/, /\d/];

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

To obfuscate specific characters (e.g., for credit card numbers), wrap the RegExp in an array within the mask definition. You must also set the showObfuscatedValue prop to true to see the effect in the UI.

// Wrapping a RegExp in an array marks it for obfuscation
const creditCardMask = [/\d/, /\d/, /\d/, /\d/, " ", [/\d/], [/\d/], [/\d/], [/\d/], " ", [/\d/], [/\d/], [/\d/], [/\d/], " ", /\d/, /\d/, /\d/, /\d/];

<MaskInput
  value={creditCard}
  mask={creditCardMask}
  showObfuscatedValue
  obfuscationCharacter="#"
  onChangeText={(masked, unmasked, obfuscated) => {
    // masked: "1234 1234 1234 1234"
    // unmasked: "1234123412341234"
    // obfuscated: "1234 #### #### 1234"
  }}
/>

The useMaskedInputProps hook generates a set of props that can be spread onto any React Native input component (like TextInput or third-party components like native-base's Input) to enable masked input behavior.

Pass an object containing the input's value, onChangeText handler, and the desired mask to the hook. The returned object contains the necessary props to synchronize the masked display with your state.

import { Input } from 'native-base'
import { Masks, useMaskedInputProps } 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} />
}

The formatWithMask function allows you to manually apply a mask to a string outside of a component. It returns an object containing the masked, unmasked, and obfuscated versions of the text.

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

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

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

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

Use createNumberMask(numberOptions) to generate a mask for numeric inputs like currency. This is highly useful for handling delimiters, separators, and precision.

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

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

<MaskInput
  value={value}
  mask={dollarMask}
  onChangeText={(masked, unmasked) => {
    // masked: "R$ 1.234,56"
    // unmasked: "123456"
  }}
/>

numberOptions configuration: