Package Exports

react-native-mask-text

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-mask-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-mask-text

This is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).

Install

yarn add react-native-mask-text

Custom Mask

Pattern used in masked components:

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

Ex: AAA-9999

Usage (MaskedTextInput)

Component similar with <TextInput /> but with custom mask option.

import { StyleSheet } from "react-native";
import { MaskedTextInput } from "react-native-mask-text";

//...

<MaskedTextInput
  mask="AAA-9999"
  onChangeText={(text, rawText) => {
    console.log(text);
    console.log(rawText);
  }}
  style={styles.input}
/>;

//...

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

Usage (MaskedText)

Component similar with <Text /> but with custom mask option.

import { MaskedText } from "react-native-mask-text";

//...

<MaskedText mask="99/99/9999">30081990</MaskedText>;

Example

You can see an example app with Expo CLI here.

Contributing

See Contributing.md

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Akinn Rosa}
💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

License

The app's source code is made available under the MIT license. Some of the dependencies are licensed differently, with the BSD license, for example.

Contact

Akinn Rosa - Github - akinncar@hotmail.com