Text Input Mask for React Native

When I first time got a task in the project I was working on to make a masked text input in React Native, I absolutely didn’t expect that it would be so difficult to implement. I just thought “ok, will install some RN module or make it by myself using onChangeText”, yep…

After many attempts with methods of TextInput like onChangeText, onKeyPress, selection I finally did it with not good performance for iOS, but not for Android, because onKeyPress method of TextInput is not implemented for Android yet. More over there was no selection property yet in the version of React Native I was working on to change a position of carriage, so I had to write it by myself in Objective-C and Java, imagine how I was wondering when saw it in the next version of RN :)

I didn’t find any solution and module that fits my needs to close the task so decided to write my own one, here it is:

UPD: now it’s under react-native-community

react-native-community/react-native-text-input-mask

0.47+ version of React Native is required

I’ve just integrated these great native RedMadRobot’s libraries to React Native:

RedMadRobot/input-mask-android

RedMadRobot/input-mask-ios

Installation

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

For Android it just works.

For iOS you have to drag and drop InputMask framework to Embedded Binaries in General tab of Target and check ‘Yes’ in ‘Always Embed Swift Standart Libraries’ of Build Settings.

Actually, I don’t understand how to get rid of the step building the module, need help https://hashnode.com/post/how-to-link-a-dependency-automatically-in-react-native-module-cj6q4jslk00u2mpwt2hvaayfz

Example

import TextInputMask from 'react-native-text-input-mask';
...
<TextInputMask mask={"+1 ([000]) [000] [00] [00]"} /

Thanks. Hope it helps, any comments, issues, PR are welcome.