How to mask Text and TextInput components in React Native and Expo

#reactnative #react #ios #android

In this post, I will show you how to work with custom masks in React Native and Expo, available for iOS, Android, and Web!

We will use a library called react-native-mask-text, is a full javascript library without native code, then you can use with all CLI of React Native environment.

You can simply start a new project with npx react-native init or expo init on your shell.

Let's assume that you already have a React Native CLI or Expo CLI created. You will need to add the mask library:

NPM:

npm i react-native-mask-text

Yarn:

yarn add react-native-mask-text

After the installation, you can import two components from this library:

<MaskedTextInput /> to add a custom mask to React Native TextInput component.

<MaskedText /> to add a custom mask to React Native Text component.

We have a mask prop in our components, then allow us to add a custom mask format passing string with format that we need.

Pattern used in masked components:

9 - accept digit.
A - accept alpha.
S - accept alphanumeric.

In this example, let's see a simple implementation of a custom date mask.
Below you will see the use of each of the two components:

MaskedTextInput with custom mask:

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import { MaskedTextInput} from "react-native-mask-text";

export default function App() {
  const [maskedValue, setMaskedValue] = useState("");
  const [unMaskedValue, setUnmaskedValue] = useState("");

  return (
    <View style={styles.container}>
      <MaskedTextInput
        mask="99/99/9999"
        onChangeText={(text, rawText) => {
          setMaskedValue(text);
          setUnmaskedValue(rawText);
        }}
        style={styles.input}
        keyboardType="numeric"
      />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

You can see that the component accept same properties of TextInput from React Native, we used style and keyboardType, and you can use your intellisense to discover other props.

MaskedText with custom mask:

import React from "react";
import { StyleSheet, View } from "react-native";
import { MaskedText } from "react-native-mask-text";

export default function App() {
  return (
    <View style={styles.container}>
      <MaskedText mask="99/99/9999" style={styles.paragraph}>
        30081990
      </MaskedText>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: "center",
  },
});

How you can see, we can add native props from React Native Text component to our MaskedText component.

That's it! 🎉

Now, you can add whatever mask you want to your Text and Input components from React Native!
If you enjoy this content, don't forget to give a star for react-native-mask-text library on Github.

https://github.com/akinncar/react-native-mask-text