Effective Mask Input Component For React Native

A simple and effective Text Input with custom mask for ReactNative. Works on iOS and Android.

Basic usage:

1. Install and import.

# Yarn
$ yarn add react-native-mask-input

# NPM
$ npm i react-native-mask-input

import MaskInput from ‘react-native-mask-input’;

2. Apply a custom input mask using Regex.

function MyComponent() {
  const [phone, setPhone] = React.useState('');
  return (
    <MaskInput
      value={phone}
      onChangeValue={(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/,
      ]}
    />
  );
}

3. Available component props.

  • mask: An array where each item defines one character of the value
  • value: Required input value
  • onChangeText: onChange function
  • placeholderFillCharacter: Custom placeholder fill character
  • obfuscationCharacter: Character to be used on the obfuscated characters
  • showObfuscatedValue: Show obfuscated values

Preview:

Effective Mask Input Component For React Native

Download Details:

Author: CaioQuirinoMedeiros

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/CaioQuirinoMedeiros/react-native-mask-input

License: MIT

You Might Be Interested In:

Add Comment