I created another mask text package to use in React Native called react-native-mask-text
The idea
In the last months, I have been work a lot with React Native, and especially Expo on my personal projects. I saw a lot of problems using some packages that don't work as expected with Expo, and with a multiplatform coverage (iOS, Android, and Web). Also, I participate frequently in some communities of mobile and web development - like React Brasil and Expo Developers - and I saw other developers constantly saying about problems with mask text and input on this environment, then I decided to made research to assess current libraries with text mask.
Existent packages
I found some libraries that have features that we want, mask text and input, but I picked two to focus the study and use in the example, and you will understand how I arrived at the point of creating another one.
react-native-masked-text
This is one of the most popular mask packages for React Native. I personally was using it in the old projects since RN 0.42 to 0.62. This package is really good and resolves a big problem, another side, it has a BIG PROBLEM!
If you enter on lib repository, you will see this on README.md
The last implementation or bug fix was released almost 2 years ago. How I said, this package is so good in some environments, I have been using it too, but in some cases it brokes, it doesn't work well with expo - although is only javascript code - and we came to one of the hardest problems of open source: A project that works well, has a lot of weekly downloads on NPM, have a great feature, but is impossible to improve and maintain updated. If it wasn't that, we could simply create issues and make pull requests.
Well, not this time, people already tried to update this library, but I understood that will be not possible anymore. If the library doesn't support your problem, and you can't improve the project, this package is not for you. Let's analyze another mask text package.
react-native-text-input-mask
Another cool library to mask text is react-native-text-input-mask, but like the name suggests, this package can only mask TextInput components withou other extensions. One of you upsides - but also a downside - is that it makes with native code.
Instead to mask value of inputs with Javascript, this lib have native implementations with Swift for iOS and Kotlin for Android. Despite of is a good library, that is don't applicable to our use case because we need to work with Web to, and principally with Expo, that don't support extern native code.
The decision
I never created a package from zero before, and I never published nothing on NPM too. I saw this opportunities to create another mask text package, and solve a problem that me and another developers are facing with, and at same time learn with libraries, bundlers, javascript, multi-platform and a lot of more things around open-source world. The source code is only with Typescript/Javascript, working with Web, iOS and Android, React Native CLI and Expo CLI Workflows, and looking to support another platforms like React Native Windows.
Releases, and about the future
The first official release was made in May, 20 - 2021, and I published all informations on my twitter account, that's where you'll find out about upcoming releases and my open-source works.
Currently we have only core features (custom mask for components and mask functions). I already still implementing new features, opening issues and make PR's all week, and publicizing tutorials and usage around the package to grow it. I believe that package can be one of - if not the - best packages for mask text to React Native community in the near future.
That’s It!
If you are looking to help React Native community, don't forget to check repository on github and npm package. My DM is always open to have a conversation and will be awesome if you can try to solve an issue, make a pull request, or give some feedback about package usage!
I hope you have enjoyed this content, don't forget to subscribe on my substack and share this content that be very valuable to other people like you!