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

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

Install

npm

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

Yarn

yarn add react-native-input-validator

Usage

Require

include TextInput from 'react-native-input-validator';

Examples

Placeholder floating label

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

// Example
<InputValidator
    ref={(r) => {
        this.input = r;
    }}
    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
include TextInput from 'react-native-input-validator';

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

Screenshots

Example

Types

email
phone
url
currency
postal-code
hex-color
identity-card
credit-card
numeric
integer | int
real | float
decimal
alpha
alphanumeric

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 style

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