react-native-input-validator

React native input with floating label and data validation


Keywords
react-native-component, react-component, react-native, android, ios, windows, reactnative, email, int, number, input, validator, validate, validation, floating, labels, placeholder, component, numeric, phone, postal-code, react, text, textinput, url
License
CNRI-Python-GPL-Compatible
Install
npm install react-native-input-validator@1.0.10

Documentation

React Native Input Validator

react-native-input-validator

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

NPM version npm download js-standard-style

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.