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:

Answer 1

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>
  );
}