React Native text input mask

Question

We're developing program on React Native, and I have a question. How to make a text input mask for ZIP code and mobile phone number via React Native?

Here's a sample:

Solution

Check out this library. https://github.com/wix/react-native-ui-lib

(or directly this: https://github.com/wix/react-native-ui-lib#masked-input)

It allows you to render custom masked input in any format you want.

You can use it as follow: (this is an example for a phone number)

import {MaskedInput} from 'react-native-ui-lib'

// in your render...
<MaskedInput
  renderMaskedText={this.renderMaskedInput}
  caretHidden
  keyboardType={'numeric'}
/>

renderMaskedInput(value) {

  return (
    <View>
      <Text>
      {value.substr(0, 3)} - {value.substr(3, 10)}
      <Text>
    <View>
  );
}

Comments

[Leonardo Alves Machado]

please post a complete answer, instead of making it dependent of an external content that might go offline sometime. The goal here is to help users, even in the future, that might have the same question.

[Ethan Sharabi]

The link is to a readme of an existing component in a lib for react native. If this one goes offline, I assume the component will not be relevant as well. But I can elaborate

[Leonardo Alves Machado]

So, put details on your answer - what is this component? how does it work? how can it solve the questioner's issue? Your answer should be complete enough without the link... check how to answer

[Ethan Sharabi]

added more info (: hopes this helps better.

[Mike Victoria]

Please add more info (: from 2020

[Nol4635]

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review