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

0.47+ version of React Native is required

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

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.