Skip to content

jazibjafri/inputs-react-native

Repository files navigation

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