{"id":21700695,"url":"https://github.com/marcocesarato/react-native-input-validator","last_synced_at":"2025-04-12T13:34:52.248Z","repository":{"id":52415723,"uuid":"191007920","full_name":"marcocesarato/react-native-input-validator","owner":"marcocesarato","description":"This library validates strings and number passed on TextInput component and highlight the result (valid green, invalid red). Optionally can have a placeholder with floating labels.","archived":false,"fork":false,"pushed_at":"2023-08-30T04:09:25.000Z","size":241,"stargazers_count":14,"open_issues_count":5,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-25T14:20:25.516Z","etag":null,"topics":["component","email","input","labels","numeric","phone","placeholder","postal-code","react","react-native","text","textinput","url","validate","validation","validator"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcocesarato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-06-09T13:09:55.000Z","updated_at":"2022-12-16T16:07:10.000Z","dependencies_parsed_at":"2024-12-01T23:01:55.772Z","dependency_job_id":null,"html_url":"https://github.com/marcocesarato/react-native-input-validator","commit_stats":{"total_commits":29,"total_committers":5,"mean_commits":5.8,"dds":0.5862068965517242,"last_synced_commit":"400649542ae14ab34161a4fc77efc6cf6071bb22"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-validator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-validator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-validator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcocesarato%2Freact-native-input-validator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcocesarato","download_url":"https://codeload.github.com/marcocesarato/react-native-input-validator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248573681,"owners_count":21126884,"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":["component","email","input","labels","numeric","phone","placeholder","postal-code","react","react-native","text","textinput","url","validate","validation","validator"],"created_at":"2024-11-25T20:16:23.125Z","updated_at":"2025-04-12T13:34:52.225Z","avatar_url":"https://github.com/marcocesarato.png","language":"JavaScript","readme":"# React Native Input Validator\n\n## `react-native-input-validator`\n\n_Compatible with: Android, iOS, Windows, Web and Expo_\n\n[![NPM version][npm-image]][npm-url]\n[![npm download][download-image]][download-url]\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)\n\n[npm-image]: http://img.shields.io/npm/v/react-native-input-validator.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/react-native-input-validator\n[download-image]: https://img.shields.io/npm/dm/react-native-input-validator.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-native-input-validator\n\n**Github:** https://github.com/marcocesarato/react-native-input-validator\n\n**Author:** Marco Cesarato\n\n## 📘 Description\n\nThis library validates strings and number passed on TextInput component and highlight the result (valid green, invalid red).\n\n## 🎨 Screenshots\n\n\u003cimg src=\"screenshots/example.png\" /\u003e\n\n## 📖 Install\n\nJust run the following command line:\n\n### npm\n\n```shell\nnpm install react-native-input-validator --save\n```\n\n### Yarn\n\n```shell\nyarn add react-native-input-validator\n```\n\n## 💻 Usage\n\n### Require\n\n```javascript\nimport TextInput from \"react-native-input-validator\";\n```\n\n### Examples\n\n#### Placeholder floating label\n\n```javascript\n// Import\nimport TextInput from \"react-native-input-validator\";\n```\n\n```javascript\n// Example\n\u003cInputValidator\n\tonRef={(r) =\u003e {\n\t\tthis.input = r;\n\t}}\n\ttype=\"email\"\n\tvalue={this.state.value}\n\tstyle={styles.input}\n\tonChangeText={(text) =\u003e {\n\t\tthis.setState({value: text});\n\t}}\u003e\n\t\u003cText\u003eDefault\u003c/Text\u003e\n\u003c/InputValidator\u003e\n```\n\n```javascript\n// Check Validation\nthis.input.isValidated(); // Faster: Check validation state\nthis.input.isValid(); // Alternative safer: Validate and check validation state\n```\n\n#### Only text input\n\n```javascript\n// Import\nimport TextInput from \"react-native-input-validator\";\n```\n\n```javascript\n// Example\n\u003cInputText\n\tonRef={(r) =\u003e {\n\t\tthis.input = r;\n\t}}\n\ttype=\"email\"\n\tvalue={this.state.value}\n\tstyle={styles.input}\n\tonChangeText={(text) =\u003e {\n\t\tthis.setState({value: text});\n\t}}\n/\u003e\n```\n\n```javascript\n// Check Validation\nthis.input.isValidated(); // Faster: Check validation state\nthis.input.isValid(); // Alternative safer: Validate and check validation state\n```\n\n## ⚡️ Run example\n\nClone or download repo and after:\n\n```shell\ncd Example\nyarn install # or npm install\nexpo start\n```\n\nOpen Expo Client on your device. Use it to scan the QR code printed by `expo start`. You may have to wait a minute while your project bundles and loads for the first time.\n\n## 📘 Types\n\n- email\n- phone\n- url\n- currency\n- postal-code\n- hex-color\n- identity-card\n- credit-card\n- numeric\n- integer | int\n- real | float\n- decimal\n- alpha\n- alphanumeric\n\n## 💡 Props\n\n### Handlers\n\nSame of `TextInput` like `onChangeText` etc...\nRead more here: https://facebook.github.io/react-native/docs/textinput.html\n\n| Additional Handlers | Description                         | Type     | Default | Note                          |\n| ------------------- | ----------------------------------- | -------- | ------- | ----------------------------- |\n| onRef               | Reference of the TextInput instance | Function |         | Important for validate fields |\n\n### Methods\n\nSame of `TextInput` like `focus()`, `clear()`, `blur()` etc...\nRead more here: https://facebook.github.io/react-native/docs/textinput.html\n\n| Additional Methods | Description                                            | Type | Default | Note |\n| ------------------ | ------------------------------------------------------ | ---- | ------- | ---- |\n| isValidated        | Check if state of TextInput is valid                   | Bool |\n| isValid            | Validate the TextInput and return the validation state | Bool |\n\n### Props\n\nSame of `TextInput` like `editable`, `autoFocus` etc...\nRead more here: https://facebook.github.io/react-native/docs/textinput.html\n\n| Additional Property | Description                                                                                  | Type   | Default   | Note                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| ------------------- | -------------------------------------------------------------------------------------------- | ------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type                | Type of input                                                                                | String | `dafault` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |\n| symbol              | Symbol for `currency` type                                                                   | String |           |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |\n| locale              | For better validation can be useful for some type like `postal-code`, `identity-card` etc... | String |           | Locale is one of `['ar', 'ar-AE', 'ar-BH', 'ar-DZ', 'ar-EG', 'ar-IQ', 'ar-JO', 'ar-KW', 'ar-LB', 'ar-LY', 'ar-MA', 'ar-QA', 'ar-QM', 'ar-SA', 'ar-SD', 'ar-SY', 'ar-TN', 'ar-YE', 'bg-BG', 'cs-CZ', 'da-DK', 'de-DE', 'el-GR', 'en-AU', 'en-GB', 'en-HK', 'en-IN', 'en-NZ', 'en-US', 'en-ZA', 'en-ZM', 'es-ES', 'fr-FR', 'hu-HU', 'it-IT', 'ku-IQ', 'nb-NO', 'nl-NL', 'nn-NO', 'pl-PL', 'pt-BR', 'pt-PT', 'ru-RU', 'sl-SI', 'sk-SK', 'sr-RS', 'sr-RS@latin', 'sv-SE', 'tr-TR', 'uk-UA']` |\n\n### Props Styles\n\n| Property       | Description               | Type   | Default | Note                        |\n| -------------- | ------------------------- | ------ | ------- | --------------------------- |\n| style          | Input style               | Object |         |                             |\n| labelStyle     | Label Style (placeholder) | Object |         | Only using `InputValidator` |\n| containerStyle | Container Style           | Object |         | Only using `InputValidator` |\n| validStyle     | Input Style when valid    | Object |         |\n| invalidStyle   | Input Style when invalid  | Object |         |\n\n## 🤔 How to contribute\n\nHave an idea? Found a bug? Please raise to [ISSUES](https://github.com/marcocesarato/react-native-input-validator/issues).\nContributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcocesarato%2Freact-native-input-validator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcocesarato%2Freact-native-input-validator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcocesarato%2Freact-native-input-validator/lists"}