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

Methods

Same of TextInput like focus(), clear(), blur() etc... Read more here: https://facebook.github.io/react-native/docs/textinput.html

Props

Same of TextInput like editable, autoFocus etc... Read more here: https://facebook.github.io/react-native/docs/textinput.html

Props Styles

🤔 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.