React native input with floating label and data validation
npm install react-native-input-validatorreact-native-input-validator_Compatible with: Android, iOS, Windows, Web and Expo_
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]

[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
This library validates strings and number passed on TextInput component and highlight the result (valid green, invalid red).

Just run the following command line:
``shell`
npm install react-native-input-validator --save
`shell`
yarn add react-native-input-validator
`javascript`
import TextInput from "react-native-input-validator";
#### Placeholder floating label
`javascript`
// Import
import TextInput from "react-native-input-validator";
`javascript`
// Example
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
#### Only text input
`javascript`
// Import
import TextInput from "react-native-input-validator";
`javascript`
// Example
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
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.
- email
- phone
- url
- currency
- postal-code
- hex-color
- identity-card
- credit-card
- numeric
- integer | int
- real | float
- decimal
- alpha
- alphanumeric
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 |
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 |
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 | |currency
| symbol | Symbol for type | String | | |postal-code
| locale | For better validation can be useful for some type like , 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'] |
| Property | Description | Type | Default | Note |
| -------------- | ------------------------- | ------ | ------- | --------------------------- |
| style | Input style | Object | | |
| labelStyle | Label Style (placeholder) | Object | | Only using InputValidator |InputValidator` |
| containerStyle | Container Style | Object | | Only using
| validStyle | Input Style when valid | Object | |
| invalidStyle | Input Style when invalid | Object | |
Have an idea? Found a bug? Please raise to ISSUES.
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.