Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



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 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 (
      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)
        /d/, // that's because I want it to be a digit (0-9)
        ' ',

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


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

Credit: Source link

Previous Next
Test Caption
Test Description goes like this