Installation

Using npm: npm i -S react-native-input-validation Using yarn: yarn add react-native-input-validation

---

Quick Start

First import InputValidation from 'react-native-input-validation

Then simply use it in your component like this:

<InputValidation validator="email" onValidatorExecuted={isValid => console.log(isValid)} validatorExecutionDelay={100}/>

This will display a text input. When you type, the "email" validator (already defined in the component) will be tested with the input value after 100ms, then it will trigger the onValidatorExecuted callback, passing the validity of the input.

---

Run the example

• cd example
• npm install or yarn
• react-native run-ios or react-native run-android

---

Props and methods

The input accepts every props from TextInput component.

Props

Prop Name	Type	Default	Description
validator	string		Input validators. Can be a regexp or a predefined name like email, username or password. The username condition is to have at least 6 characters and at most 20 characters. The password condition is to have at least 8 characters, one lowercase, one uppercase, one special character and one number. You can pass your own regexp as a string.
validatorExecutionDelay	number	0	Delay after which validation is checked
customValidator	function		Function returning a boolean corresponding to the input validity, receiving input value as parameter. Can be used to compare the value of 2 inputs, for exemple password input, and password confirmation input.
onValidatorExecuted	function		Callback executed when the validation is done
errorMessage	string	'Invalid entry'	Message displayed when the input is invalid
errorMessageStyle	ViewPropTypes.style	{ color: 'red' }	Style applied to the text error message
errorInputContainerStyle	ViewPropTypes.style	{ borderColor: ‘red’, borderWidth: 1 }	Style applied to the input view container when the input is invalid.
containerStyle	ViewPropTypes.style		Style applied to the global container
iconComponent	Component		Component used to display the icon at the left of the input.
iconName	string		Name of the icon displayed at the left of the input
iconSize	number		Size of the icon displayed at the left of the input
iconColor	string		Color of the icon displayed at the left of the input
label	string	null	Label of the input
labelStyle	Text style		Style applied to the label
textInputContainerStyle	ViewPropTypes.style		Style applied to the input container, which wraps the icon and the input
inputRef	function		Ref for the TextInput

Methods

Name	Params	Description
getTextValue		Returns the value of the input
isInputValid		Returns the validity of the input
triggerValidators		Trigger the validators execution with the delay
executeValidators		Execute the validators without delay

---

Contributing

If you have any problem, leave an issue here

If you want to add a feature of fix a bug, leave a pull request.