A simple and effective ReactNative input mask component

Category: React React Form | June 26, 2021
Author: CaioQuirinoMedeiros
Official Page: Go to website
Last Update: June 26, 2021
License: MIT

Description:

A simple and effective ReactNative input mask component with great features, that works well on iOS and Android.

Features:

  1. You can customize the input mask using RegExp.
  2. Its used ES6, React hooks and TypeScript.
  3. Show obfuscated values.
  4. You can export formatWithMask function that will do all the things.

How to use it?

First, install the component using NPM.

npm install react-native-mask-input

Or, you can install it via Yarn.

npm install react-native-mask-input

Then, import the component.

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

Usage:

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

  return (
    <MaskInput
      value={phone}
      onChangeText={(masked, unmasked, obfuscated) => {
        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
        console.log(obfuscated); // (99) 99999-9999 (there's no obfuscation on this mask example)
      }}
      mask={[
        '(',
        /\d/, // that's because I want it to be a digit (0-9)
        /\d/,
        ')',
        ' ',
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        /\d/,
        '-',
        /\d/,
        /\d/,
        /\d/,
        /\d/,
      ]}
    />
  );
}