React Native Advanced Input Mask

Overview

react-native-advanced-input-mask is a React Native package that provides flexible input masking functionality for mobile applications. It allows you to format input fields dynamically as users type, ensuring that data is entered in a consistent and valid format. This package wraps the input-mask-android library for Android and its equivalent for iOS, offering a cross-platform solution.

Input masking can be used to format text fields for phone numbers, dates, credit card numbers, social security numbers, and other input types that require specific formatting.

Features

• ✨ Ensures smooth, flicker-free text formatting in a real time.
• 🧬 Supports multiple mask types and formats.
• ⚡ Instantly applies the correct format as users type, without delays.
• 🚀 Cross-platform support for iOS, Android and web.
• 🛠️ Easy integration with existing React Native components.

Install the package using npm or yarn:

1npm install react-native-advanced-input-mask
2# or
3yarn add react-native-advanced-input-mask

Usage

Import react-native-advanced-input-mask in your component to apply masking to input fields.

Basic Example

1import React, { useState, useCallback } from "react";
2import { TextInput, View } from "react-native";
3import { MaskedTextInput } from "react-native-advanced-input-mask";
4
5const ExampleComponent = () => {
6  const [phoneNumber, setPhoneNumber] = useState("");
7
8  const onChangeText = useCallback((formatted, extracted) => {
9    setPhoneNumber(formatted);
10  }, []);
11
12  return (
13    <MaskedTextInput
14      autocomplete={false}
15      mask="+1 ([000]) [000]-[0000]"
16      value={phoneNumber}
17      onChangeText={onChangeText}
18      keyboardType="numeric"
19    />
20  );
21};
22
23export default ExampleComponent;

UK IBAN:

1import React, { useState, useCallback } from "react";
2import { TextInput, View } from "react-native";
3import { MaskedTextInput } from "react-native-advanced-input-mask";
4
5const ExampleComponent = () => {
6  const [IBAN, setIBAN] = useState("");
7
8  const onChangeText = useCallback((formatted, extracted) => {
9    setIBAN(formatted);
10  }, []);
11
12  return (
13    <MaskedTextInput
14      autocomplete={false}
15      mask="GB[00] [____] [0000] [0000] [0000] [00]"
16      value={IBAN}
17      onChangeText={onChangeText}
18    />
19  );
20};
21
22export default ExampleComponent;

Dates:

1import React, { useState, useCallback } from "react";
2import { TextInput, View } from "react-native";
3import { MaskedTextInput } from "react-native-advanced-input-mask";
4
5const ExampleComponent = () => {
6  const [date, setDate] = useState("");
7
8  const onChangeText = useCallback((formatted, extracted) => {
9    setDate(formatted);
10  }, []);
11
12  return (
13    <MaskedTextInput
14      autocomplete={false}
15      mask="[00]{.}[00]{.}[9900]"
16      value={date}
17      onChangeText={onChangeText}
18    />
19  );
20};
21
22export default ExampleComponent;

Detailed Mask Explanation

The mask pattern defines how user input is processed and displayed. The characters below are used for defining patterns:

• [0]: mandatory digit. For instance, [000] will allow entering three digits: 123.
• [9]: optional digit.For instance, [00099] will allow entering up to five digits, but at least three.
• [A]: mandatory letter. For instance, [AAA] will allow entering three letters: ABC.
• [a]: optional letter. [АААааа] will allow entering from three to six letters.
• [_]: mandatory symbol (digit or letter).
• [-]: optional symbol (digit or letter).
• […]: ellipsis. Allows to enter endless count of symbols.

Advanced Usage

For applications requiring conditional or more complex formatting, this package provides additional configuration options.

Pipeline

MaskedTextInput Component - Props

Cookbook

Cookbook is a community-driven handbook with complete solutions for common problems.
Text formatting problems, of course.

Feel free to suggest your own recipes or correct the existing ones.

Chapters

• Credit cards
• Amount inputs
• Dates
• IBAN, International Bank Account Number
• Phone numbers

[0000] [000000] [00000]
3[000] [000000] [00000]

[0000] [000000] [0000]
3[000] [000000] [0000]

[0000] [0000] [0000] [0000]
6[000] [0000] [0000] [0000]

[0000] [0000] [0000] [0000]
5[000] [0000] [0000] [0000]

[0000] [0000] [0000] [0000]
4[000] [0000] [0000] [0000]

[0999990].[09]

[00]{/}[00]{/}[00]
[00]{/}[00]{/}[0000]

[00]{.}[00]{.}[00]
[00]{.}[00]{.}[0000]

BE[00] [0000] [0000] [0000]

FR[00] [0000] [0000] [0000] [0000] [0000] [000]

DE[00] [0000] [0000] [0000] [0000] [00]

GR[00] [0000] [0000] [0000] [0000] [0000] [000]

RO[00] [____] [0000] [0000] [0000] [0000]

SA[00] [0000] [0000] [0000] [0000] [0000]

ES[00] [0000] [0000] [0000] [0000] [0000]

CH[00] [0000] [0000] [0000] [0000] [0]

GB[00] [____] [0000] [0000] [0000] [00]

8 ([000]) [000]-[00]-[00]

1import React, { useState, useCallback } from "react";
2import { TextInput, View } from "react-native";
3import { MaskedTextInput } from "react-native-advanced-input-mask";
4
5const alphaNumericChars =
6  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
7
8const charAlphaNumerics = [
9  {
10    character: "$",
11    characterSet: alphaNumericChars,
12    isOptional: false,
13  },
14];
15
16const ExampleComponent = () => {
17  const [text, setText] = useState("");
18
19  const onChangeText = useCallback((formatted, extracted) => {
20    setText(formatted);
21  }, []);
22
23  return (
24    <MaskedTextInput
25      mask="[$$$$$$$$$$$]"
26      value={text}
27      onChangeText={onChangeText}
28    />
29  );
30};

1git clone https://github.com/IvanIhnatsiuk/react-native-advanced-input-mask
2cd react-native-advanced-input-mask && yarn install