Inputs React Native

Inputs for react native with easy built-in validations.

For a complete example, see below

Installation

npm install inputs-react-native

Basic Usage

import TextInput from 'inputs-react-native'

const Component = () => {
  <>
      <TextInput validators={['basic', 'email']} />
  </>
}

And that's it! Your text input is now complete with email validation.

All Accepted Props

In addition to all props accepted by TextInput from react-native, following props are accepted:

Property name	Type	Values	Default	Description
onChangeText	optional	(val: string, error: boolean) => void	undefined	returns input text and error status
validators	optional	Array<'basic' | 'email | 'password' | 'phone'>	[]	validations to apply.
validateOn	optional	start-editing, end-editing, never	end-editing	when to run validation
errorMessage	optional	any	(separate defaults for each validation type)	custom error message to display when validation fails
errorViewStyles	optional	ViewStyle	(some basic styles)	styles for view component of error message
errorTextStyles	optional	TextStyle	(some basic styles)	styles for text component of error message

All other props are passed down to react-native's TextInput

Example

import React, { useState } from 'react';
import { StyleSheet } from 'react-native';
import TextInput from 'inputs-react-native';

const Input = () => {
    const [email, setEmail] = useState('');
    
    const handleOnChange = (val, err) => {
        if(err) {
            // handle error
        }
        //handle change
        setEmail(val);
    }
  
    return (
        <TextInput
            validators={['basic', 'email']}
            onChangeText={(val, err) => handleOnChange(val, err)}
            value={email}
            validateOn="start-editing"
            errorMessage="Invalid email format"
            errorViewStyles={styles.errorViewStyles}
            errorTextStyles={styles.errorTextStyles}
        />
    );
}

const styles = StyleSheet.create({
  errorTextStyles: {
    color: 'red',
  },
  errorViewStyles: {
    borderColor: 'red',
    borderWidth: 2,
  },
});

License

MIT