react-native-input-validator

# React Native Input Validator ## `react-native-input-validator` _Compatible with: Android, iOS, Windows, Web and Expo_ [![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [npm-image]: http://img.shields.io/npm/v/react-native-input-validator.svg?style=flat-square [npm-url]: http://npmjs.org/package/react-native-input-validator [download-image]: https://img.shields.io/npm/dm/react-native-input-validator.svg?style=flat-square [download-url]: https://npmjs.org/package/react-native-input-validator **Github:** https://github.com/marcocesarato/react-native-input-validator **Author:** Marco Cesarato ## 📘 Description This library validates strings and number passed on TextInput component and highlight the result (valid green, invalid red). ## 🎨 Screenshots <img src="screenshots/example.png" /> ## 📖 Install Just run the following command line: ### npm ```shell npm install react-native-input-validator --save ``` ### Yarn ```shell yarn add react-native-input-validator ``` ## 💻 Usage ### Require ```javascript import TextInput from "react-native-input-validator"; ``` ### Examples #### Placeholder floating label ```javascript // Import import TextInput from "react-native-input-validator"; ``` ```javascript // Example <InputValidator onRef={(r) => { this.input = r; }} type="email" value={this.state.value} style={styles.input} onChangeText={(text) => { this.setState({value: text}); }}> <Text>Default</Text> </InputValidator> ``` ```javascript // Check Validation this.input.isValidated(); // Faster: Check validation state this.input.isValid(); // Alternative safer: Validate and check validation state ``` #### Only text input ```javascript // Import import TextInput from "react-native-input-validator"; ``` ```javascript // Example <InputText onRef={(r) => { this.input = r; }} type="email" value={this.state.value} style={styles.input} onChangeText={(text) => { this.setState({value: text}); }} /> ``` ```javascript // Check Validation this.input.isValidated(); // Faster: Check validation state this.input.isValid(); // Alternative safer: Validate and check validation state ``` ## ⚡️ Run example Clone or download repo and after: ```shell cd Example yarn install # or npm install expo start ``` Open 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. ## 📘 Types - email - phone - url - currency - postal-code - hex-color - identity-card - credit-card - numeric - integer | int - real | float - decimal - alpha - alphanumeric ## 💡 Props ### Handlers Same of `TextInput` like `onChangeText` etc... Read more here: https://facebook.github.io/react-native/docs/textinput.html | Additional Handlers | Description | Type | Default | Note | | ------------------- | ----------------------------------- | -------- | ------- | ----------------------------- | | onRef | Reference of the TextInput instance | Function | | Important for validate fields | ### Methods Same of `TextInput` like `focus()`, `clear()`, `blur()` etc... Read more here: https://facebook.github.io/react-native/docs/textinput.html | Additional Methods | Description | Type | Default | Note | | ------------------ | ------------------------------------------------------ | ---- | ------- | ---- | | isValidated | Check if state of TextInput is valid | Bool | | isValid | Validate the TextInput and return the validation state | Bool | ### Props Same of `TextInput` like `editable`, `autoFocus` etc... Read more here: https://facebook.github.io/react-native/docs/textinput.html | Additional Property | Description | Type | Default | Note | | ------------------- | -------------------------------------------------------------------------------------------- | ------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | type | Type of input | String | `dafault` | | | symbol | Symbol for `currency` type | String | | | | 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']` | ### Props Styles | Property | Description | Type | Default | Note | | -------------- | ------------------------- | ------ | ------- | --------------------------- | | style | Input style | Object | | | | labelStyle | Label Style (placeholder) | Object | | Only using `InputValidator` | | containerStyle | Container Style | Object | | Only using `InputValidator` | | validStyle | Input Style when valid | Object | | | invalidStyle | Input Style when invalid | Object | | ## 🤔 How to contribute Have an idea? Found a bug? Please raise to [ISSUES](https://github.com/marcocesarato/react-native-input-validator/issues). Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.