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:

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:

• javascript
• android
• ios
• react-native

• 1 Welcome to Stack Overflow! I edited your question as far as I could guess your problem. However, add code and description so that more people with knowledge of the subject will see it. Please edit in the specific error-message you're encountering in case that's necessary to identify the specific problem. Good Luck! – Enamul Hassan Commented Jul 27, 2016 at 9:16
• You want the "fields" to be visible even after the user starts typing? – nabn Commented Jul 27, 2016 at 9:41
• Maybe there are modules written in objc or swift which you could export to react-native. – Michael Malura Commented Jul 27, 2016 at 12:07
• Nabn, yes, I want visible fields. – Denis Spro Commented Jul 28, 2016 at 8:12
• Manetsus, thanks for editing. I don't have error message. I just need to make fields via RN like in a sample above – Denis Spro Commented Jul 28, 2016 at 8:17

3 Answers 3

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

I recommend using this library to use a custom mask on TextInput component https://github.com/akinncar/react-native-mask-text

I had a lot of difficulty with masks in react native and react, that's why I'm building this library: https://github.com/lehnihon/ts-simple-mask

You can use the mask for postal code:

import React from "react";
import { TextInput } from "react-native";
import createTsMask, { MaskType } from "ts-simple-mask";

const TsMask = createTsMask();

export const TextForm = () => {
  const [value, setValue] = React.useState("");

  const handleChange = (text: string) => {
    const { masked } = TsMask.mask(
      text,
      TsMask.getMask(text, '00000 000')
    );
    setValue(masked);
  };

  return <TextInput onChangeText={handleChange} value={value} />;
};