Home

Awesome

react-native-text-input-mask

Text input mask for React Native on iOS and Android.

<a href="https://www.npmjs.org/package/react-native-text-input-mask"> <img src="https://badge.fury.io/js/react-native-text-input-mask.svg" alt="NPM package version." /> </a> <a href="https://github.com/react-native-community/react-native-text-input-mask/blob/master/LICENSE"> <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT license." /> </a>

Examples

React Native Text Input Mask iOS React Native Text Input Mask Android

Setup

npm install --save react-native-text-input-mask

# --- or ---

yarn add react-native-text-input-mask

Installation

<details> <summary><b>For RN >= 0.60</b></summary>

iOS

  1. Configure pods (static or dynamic linking)
<details> <summary>Static Library ( Podfile has no use_frameworks! ) </summary> Add following lines to your target in `Podfile`. Linking is not required in React Native 0.60 and above. 
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => true
</details> <details> <summary>Dynamic Framework ( Podfile has use_frameworks! ) </summary> Add following lines to your target in `Podfile` if it doesnt exist. Linking is not required in React Native 0.60 and above. 
use_frameworks!
</details>
  1. Run pod install in the ios directory.

Android

No need to do anything.

</details> <details><summary><b>For RN < 0.60</b></summary>

WARNING! This is no longer officially supported, these instructions are out of date and may no longer work, we recommend upgrading to a newer version of React Native.

Link

react-native link react-native-text-input-mask

iOS only: you have to drag and drop InputMask.framework to Embedded Binaries in General tab of Target

Manual installation

iOS

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ react-native-text-input-mask and add RNTextInputMask.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNTextInputMask.a to your project's Build Phases ➜ Link Binary With Libraries
  4. Run your project (Cmd+R)

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  1. Append the following lines to android/settings.gradle: 
    include ':react-native-text-input-mask'
project(':react-native-text-input-mask').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-text-input-mask/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle: 
      compile project(':react-native-text-input-mask')
</details>

Usage

import TextInputMask from 'react-native-text-input-mask';
...
<TextInputMask
  onChangeText={(formatted, extracted) => {
    console.log(formatted) // +1 (123) 456-78-90
    console.log(extracted) // 1234567890
  }}
  mask={"+1 ([000]) [000] [00] [00]"}
/>
...

Testing

Jest

Make sure to mock the following to jest.setup.js:

jest.mock('react-native-text-input-mask', () => ({
    default: jest.fn(),
}))

More info

RedMadRobot Input Mask Android

RedMadRobot Input Mask IOS

Versioning

This project uses semantic versioning: MAJOR.MINOR.PATCH. This means that releases within the same MAJOR version are always backwards compatible. For more info see semver.org.

Local Development and testing

To use a local copy with your project, it's highly recommended to use https://github.com/wix/wml