react-native-input-validator

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