Package Exports

react-native-input-validator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-input-validator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

// Require
import TextInput from 'react-native-input-validator';

// Example
<InputValidator
    ref={(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
this.input.isValid();

Only text input

// Require
import TextInput from 'react-native-input-validator';

// Example
<InputText
    ref={(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
this.input.isValid();

⚡️ 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. Read more here: https://facebook.github.io/react-native/docs/textinput.html

Props

Same of TextInput. Read more here: https://facebook.github.io/react-native/docs/textinput.html

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.