How to mask Text and TextInput components in React Native and Expo
Tags: reactnative, react, ios, android
Published: 2021-05-26 13:23:24

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](https://www.npmjs.com/package/react-native-mask-text), is a full javascript library without native code, then you can use with all CLI of React Native environment.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrauuwx3rxh2xshw38g5.jpg)

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
```

or

#### 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: 
```jsx
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: 
```jsx
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