How to mask a phone number input in React Native?

Use react-native-text-input-mask with a mask prop like '+1 ([000]) [000] [00] [00]' to format phone numbers in real-time. However, since it's deprecated, consider alternatives like react-native-advanced-input-mask for new projects.

react-native-text-input-mask vs react-native-advanced-input-mask – which is better?

The original maintainers recommend react-native-advanced-input-mask as it is actively maintained and likely includes improvements. For new projects, choose the advanced version for better support and features.

How to get the raw value from a masked input in React Native?

With react-native-text-input-mask, the onChangeText callback returns both formatted and extracted values. For example, onChangeText={(formatted, extracted) => console.log(extracted)} logs the unmasked string.

Why is react-native-text-input-mask no longer updated?

The library has been deprecated in favor of react-native-advanced-input-mask, which offers enhanced functionality and active maintenance. This shift indicates the original project is abandoned for new development.

How to install react-native-text-input-mask in React Native 0.60+?

Install via npm or yarn, then for iOS, configure the Podfile with settings for static or dynamic linking and run pod install. Android requires no additional setup, as per the README.

What are good alternatives for input masking in React Native?

Consider react-native-advanced-input-mask (recommended by the authors) or libraries like react-native-masked-text. Evaluate based on maintenance status, features, and compatibility with your React Native version.

Open-Awesome

react-native-text-input-mask

MITKotlinv3.1.4

A React Native library for applying input masks to text fields, supporting iOS and Android.

GitHub

1.2k stars310 forks0 contributors

What is react-native-text-input-mask?

react-native-text-input-mask is a React Native library that applies input masks to text fields, enabling formatted data entry like phone numbers, dates, or custom patterns. It solves the problem of inconsistent user input by enforcing specific formats in real-time, improving data quality and user experience. The library provides both formatted and raw extracted values for easy processing.

Target Audience

React Native developers building mobile applications that require structured text input, such as forms for phone numbers, credit cards, or identification numbers. It's particularly useful for projects needing consistent data formatting across iOS and Android.

Value Proposition

Developers choose this library for its cross-platform compatibility, simple integration, and reliance on native implementations for reliable masking. It offers a declarative API that reduces boilerplate code compared to manual input handling.

Overview

Text input mask for React Native, Android and iOS

Use Cases

Best For

Formatting phone number inputs in React Native apps
Enforcing date or time formats in mobile forms
Creating masked input fields for credit card numbers
Implementing custom text patterns like postal codes or IDs
Ensuring consistent data entry across iOS and Android
Real-time input validation with visual feedback

Not Ideal For

New projects needing long-term maintenance and active updates, as this library is deprecated
Teams using React Native versions below 0.60, due to outdated and unsupported installation steps
Applications requiring advanced validation or dynamic mask changes beyond basic formatting
Developers seeking pre-styled, out-of-the-box input components with built-in UI enhancements

Pros & Cons

Pros

Cross-Platform Compatibility

Works seamlessly on both iOS and Android by leveraging native implementations, ensuring consistent performance across platforms as highlighted in the README.

Real-Time Formatting

Formats input as users type, providing immediate visual feedback and extracting raw values through the onChangeText callback, improving data consistency.

Customizable Mask Patterns

Supports defining custom masks using patterns like '+1 ([000]) [000] [00] [00]', allowing flexible data entry for phone numbers, dates, or IDs.

Declarative API

Offers a simple, declarative API that reduces boilerplate code for input handling, making integration straightforward compared to manual implementations.

Cons

Deprecated and Unmaintained

The README explicitly states the repository is no longer maintained and recommends an alternative, posing risks for bug fixes and compatibility updates.

Complex Setup for Older RN

For React Native <0.60, installation involves manual, outdated steps with warnings that they may not work, increasing setup time and potential errors.

Limited Feature Set

Focuses solely on input masking without built-in validation or advanced features like dynamic masks, which may require additional libraries for complex forms.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,848

Forks2,106

Last commit2 days ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,140

Forks1,801

Last commit9 days ago

react-native-maps

React Native Mapview component for iOS + Android

Stars15,954

Forks4,958

Last commit19 days ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,390

Forks3,616