Skip to content

JNCJcoder/react-native-text-input-mask

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


React-Native-Text-Input-Mask

Text input mask for React Native on iOS and Android.

πŸ“ Additional Features

  • Rewritten with React Hooks.
  • Eslint-config updated to 1.1.0.
  • Fix "componentWillReceiveProps" Warnings.
  • Fix "FATAL EXCEPTION: IndexOutOfBoundsException".
  • Fix "Android Backspace Rendering Issue".

ONLY TESTED IN ANDROID 9.

πŸ’» Examples

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

πŸ—οΈ Setup

npm install --save drawciamage/react-native-text-input-mask
# --- or ---
yarn add https://github.com/drawciamage/react-native-text-input-mask.git

πŸ’» Installation

For RN >= 0.61

iOS

  1. Add following lines to your target in Podfile
use_frameworks!
pod 'RNInputMask', :path => '../node_modules/react-native-text-input-mask/ios/InputMask'
  1. Run following command
cd ios && pod install

Android

No need to do anything.

For RN = 0.60.*

iOS

  1. In XCode, in the project navigator, right click your [your project's name] folder, choose ➜ Add Files to [your project's name]

Create Swift File

  1. Select Swift File ➜ Next

Create Swift File

  1. Specify name for example Dummy.swift ➜ Create

Create Swift File

  1. Now a pop up is shown select Create Bridging Header

Create Swift File

  1. Add following line to your target in Podfile
pod 'RNInputMask', :path => '../node_modules/react-native-text-input-mask/ios/InputMask'
  1. Run following command
cd ios && pod install

Android

No need to do anything.

For RN < 0.60

Auto Linking

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
  • Add import com.RNTextInputMask.RNTextInputMaskPackage; to the imports at the top of the file
  • Add new RNTextInputMaskPackage() to the list returned by the getPackages() method
  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')

πŸ‘¨β€πŸ« Usage

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

πŸ“ 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.