react-native-input-validator

    1.0.12 • Public • Published

    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.

    Install

    npm i react-native-input-validator

    DownloadsWeekly Downloads

    49

    Version

    1.0.12

    License

    GPL-3.0-or-later

    Unpacked Size

    74.4 kB

    Total Files

    11

    Last publish

    Collaborators

    • marcocesarato