{"id":13624563,"url":"https://github.com/akinncar/react-native-mask-text","last_synced_at":"2025-04-11T23:15:55.500Z","repository":{"id":40651243,"uuid":"366532903","full_name":"akinncar/react-native-mask-text","owner":"akinncar","description":"🎭 A React Native and Expo library to mask text and inputs","archived":false,"fork":false,"pushed_at":"2024-05-29T10:58:32.000Z","size":325,"stargazers_count":430,"open_issues_count":16,"forks_count":39,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-11T23:15:50.582Z","etag":null,"topics":["expo","input","mask","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akinncar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["akinncar"],"issuehunt":"akinncar/react-native-mask-text?tab=idle","custom":null}},"created_at":"2021-05-11T22:58:24.000Z","updated_at":"2025-03-26T10:32:55.000Z","dependencies_parsed_at":"2024-01-14T08:25:50.531Z","dependency_job_id":"58d430b9-3299-49c3-84dd-23049518a9eb","html_url":"https://github.com/akinncar/react-native-mask-text","commit_stats":{"total_commits":84,"total_committers":13,"mean_commits":6.461538461538462,"dds":0.25,"last_synced_commit":"59d00129a287cf3e2910bf5785ac2bca8b95fdff"},"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinncar%2Freact-native-mask-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinncar%2Freact-native-mask-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinncar%2Freact-native-mask-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akinncar%2Freact-native-mask-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akinncar","download_url":"https://codeload.github.com/akinncar/react-native-mask-text/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248492884,"owners_count":21113163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["expo","input","mask","react","react-native"],"created_at":"2024-08-01T21:01:43.772Z","updated_at":"2025-04-11T23:15:55.472Z","avatar_url":"https://github.com/akinncar.png","language":"TypeScript","funding_links":["https://github.com/sponsors/akinncar","https://issuehunt.io/r/akinncar/react-native-mask-text?tab=idle"],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-native-mask-text\n\nThis is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).\n\n## Motivation\n\nThis package was created based on other libraries of React Native text mask, with the goal of meeting the need of having a package to be used with all React Native contexts (multi-platform concept) and also be maintained currently. You can read [this blog post on Substack](https://akinncar.substack.com/p/why-another-mask-text-package) to see more information about the creation to the current moment of this package.\n\n## Install\n\n```shell\nyarn add react-native-mask-text\n```\n\n## Custom Mask\n\nPattern used in masked components:\n\n- `9` - accept digit.\n- `A` - accept alpha.\n- `S` - accept alphanumeric.\n\nEx: AAA-9999\n\n### Usage MaskedTextInput (custom)\n\nComponent similar with `\u003cTextInput /\u003e` but with custom mask option.\n\n```jsx\nimport { StyleSheet } from \"react-native\";\nimport { MaskedTextInput } from \"react-native-mask-text\";\n\n//...\n\n\u003cMaskedTextInput\n  mask=\"AAA-9999\"\n  onChangeText={(text, rawText) =\u003e {\n    console.log(text);\n    console.log(rawText);\n  }}\n  style={styles.input}\n/\u003e;\n\n//...\n\nconst styles = StyleSheet.create({\n  input: {\n    height: 40,\n    margin: 12,\n    borderWidth: 1,\n  },\n});\n```\n\n### Usage MaskedText (custom)\n\nComponent similar with `\u003cText /\u003e` but with custom mask option.\n\n```jsx\nimport { MaskedText } from \"react-native-mask-text\";\n\n//...\n\n\u003cMaskedText mask=\"99/99/9999\"\u003e30081990\u003c/MaskedText\u003e;\n```\n\n## Date Mask\n\nThese options only are used if you use prop `type=\"date\"` in your component:\n\n| Option                 | Type   | Mandatory | Default Value | Description                                 |\n|------------------------|--------|-----------|---------------|---------------------------------------------|\n| dateFormat             | string | No        | yyyy/mm/dd    | Date Format                                 |\n\n### Usage MaskedTextInput (date)\n\nComponent similar with `\u003cTextInput /\u003e` but with date mask option.\n\n```jsx\nimport { StyleSheet } from \"react-native\";\nimport { MaskedTextInput } from \"react-native-mask-text\";\n\n//...\n\n\u003cMaskedTextInput\n  type=\"date\"\n  options={{\n    dateFormat: 'YYYY/DD/MM',\n  }}\n  onChangeText={(text, rawText) =\u003e {\n    console.log(text);\n    console.log(rawText);\n  }}\n  style={styles.input}\n  keyboardType=\"numeric\"\n/\u003e\n\n//...\n\nconst styles = StyleSheet.create({\n  input: {\n    height: 40,\n    margin: 12,\n    borderWidth: 1,\n  },\n});\n```\n\n## Time Mask\n\nThese options only are used if you use prop `type=\"time\"` in your component:\n\n| Option                 | Type   | Mandatory | Default Value | Description                                 |\n|------------------------|--------|-----------|---------------|---------------------------------------------|\n| timeFormat             | string | No        | HH:mm:ss      | Time Format                                 |\n\n### Usage MaskedTextInput (time)\n\nComponent similar with `\u003cTextInput /\u003e` but with time mask option.\n\n```jsx\nimport { StyleSheet } from \"react-native\";\nimport { MaskedTextInput } from \"react-native-mask-text\";\n\n//...\n\n\u003cMaskedTextInput\n  type=\"time\"\n  options={{\n    timeFormat: 'HH:mm:ss', // or 'HH:mm'\n  }}\n  onChangeText={(text, rawText) =\u003e {\n    setMaskedValue(text)\n    setUnmaskedValue(rawText)\n  }}\n  style={styles.input}\n  keyboardType=\"numeric\"\n/\u003e\n\n//...\n\nconst styles = StyleSheet.create({\n  input: {\n    height: 40,\n    margin: 12,\n    borderWidth: 1,\n  },\n});\n```\n\n## Currency Mask\n\nThese options only are used if you use prop `type=\"currency\"` in your component:\n\n| Option                 | Type   | Mandatory | Default Value | Description                                 |\n|------------------------|--------|-----------|---------------|---------------------------------------------|\n| prefix                 | string | No        | null          | String to prepend                           |\n| decimalSeparator       | string | No        | null          | Separation for decimals                     |\n| groupSeparator         | string | No        | null          | Grouping separator of the integer part      |\n| precision              | number | No        | 0             | Precision for fraction part (cents)         |\n| groupSize              | number | No        | 3             | Primary grouping size of the integer part   |\n| secondaryGroupSize     | number | No        | null          | Secondary grouping size of the integer part |\n| fractionGroupSeparator | string | No        | null          | Grouping separator of the fraction part     |\n| fractionGroupSize      | number | No        | null          | Grouping size of the fraction part          |\n| suffix                 | string | No        | null          | String to append                            |\n\n### Usage MaskedTextInput (currency)\n\nComponent similar with `\u003cTextInput /\u003e` but with currency mask option.\n\n```jsx\nimport { StyleSheet } from \"react-native\";\nimport { MaskedTextInput } from \"react-native-mask-text\";\n\n//...\n\n\u003cMaskedTextInput\n  type=\"currency\"\n  options={{\n    prefix: '$',\n    decimalSeparator: '.',\n    groupSeparator: ',',\n    precision: 2\n  }}\n  onChangeText={(text, rawText) =\u003e {\n    console.log(text);\n    console.log(rawText);\n  }}\n  style={styles.input}\n  keyboardType=\"numeric\"\n/\u003e\n\n//...\n\nconst styles = StyleSheet.create({\n  input: {\n    height: 40,\n    margin: 12,\n    borderWidth: 1,\n  },\n});\n```\n\n### Usage MaskedText (currency)\n\nComponent similar with `\u003cText /\u003e` but with currency mask option.\n\n```jsx\nimport { MaskedText } from \"react-native-mask-text\";\n\n//...\n\n\u003cMaskedText\n  type=\"currency\"\n  options={{\n    prefix: '$',\n    decimalSeparator: '.',\n    groupSeparator: ',',\n    precision: 2\n  }}\n\u003e\n  5999\n\u003c/MaskedText\u003e;\n```\n\n## Usage `mask` function\n\nFunction used to mask text.\n\n```js\nimport { mask } from \"react-native-mask-text\";\n\nconst code = mask(\"ABC1234\",\"AAA-9999\") // return ABC-1234\n```\n\n## Usage `unMask` function\n\nFunction used to remove text mask.\n\n```js\nimport { unMask } from \"react-native-mask-text\";\n\nconst code = unMask(\"ABC-1234\") // return ABC1234\n```\n\n## Example\n\nYou can see an example app with Expo CLI [here](example/App.js).\n\nYou can see a SignUp example on Expo Snack working with iOS, Mobile, and Web [here](https://snack.expo.dev/@brenont/react-native-mask-text-example).\n\n## Contributing\n\nSee [Contributing.md](CONTRIBUTING.md)\n\n## License\n\nThe app's source code is made available under the [MIT license](LICENSE). Some of the dependencies are licensed differently, with the BSD license, for example.\n\n## Contact\n\nAkinn Rosa - [Github](https://github.com/akinncar) - **[akinncar@hotmail.com](mailto:akinncar@hotmail.com)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakinncar%2Freact-native-mask-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakinncar%2Freact-native-mask-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakinncar%2Freact-native-mask-text/lists"}