React Native Input Validator

`react-native-input-validator`

Compatible with: Android, iOS, Windows, Web and Expo

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

📖 Install

Just run the following command line:

npm

npm install react-native-input-validator --save

Yarn

yarn add react-native-input-validator

💻 Usage

Require

import TextInput from "react-native-input-validator";

Examples

Placeholder floating label

// Import
import TextInput from "react-native-input-validator";

// 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>

// Check Validation
this.input.isValidated(); // Faster: Check validation state
this.input.isValid(); // Alternative safer: Validate and check validation state

Only text input

// Import
import TextInput from "react-native-input-validator";

// Example
<InputText
	onRef={(r) => {
		this.input = r;
	}}
	type="email"
	value={this.state.value}
	style={styles.input}
	onChangeText={(text) => {
		this.setState({value: text});
	}}
/>

// 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:

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	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. Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.

marcocesarato / react-native-input-validator Goto Github PK