Installation

Validators:

<ValidationComponentcomponent={<RkTextInputrkType="bordered"style={{width:"100%"}}placeholder="You can type a description"value={description}onChangeText={value=>this.setState({description:value})}/>}validators={["required","maxNumber:255"]}errorMessages={["this field is required","must be max 255"]}/>

Usage

import{ValidationForm,ValidationComponent}from"react-native-validator";constructor(props,context){super(props,context);ValidationComponent.setDefaultErrorMessageStyle({color:"white",fontSize:12,});}render(){return(<ValidationFormstyle={style.container}ref={ref=>(this.form=ref)}onSubmit={()=>this.props.saveUserList()}onError={()=>console.log("houston we have a problem")}><ValidationComponentcomponent={<RkTextInputrkType="bordered"style={{width:"100%"}}placeholder="List Name"value={name}onChangeText={value=>this.setState({name:value.trim()})}/>}validators={["required","isEmail"]}errorMessages={["this field is required","email is not valid"]}/><ValidationComponentcomponent={<TextInputstyle={{width:"100%"}}placeholder="You can type a description"value={description}onChangeText={value=>this.setState({description:value})}/>}errorMessageStyle={{color:"red"}}validators={["required"]}errorMessages={["this field is required"]}/><RkButtonrkType="primary xlarge"onPress={()=>this.form.validate()}>          Next</RkButton></ValidationForm>);}...

You can add your own rules

// validators={["isPasswordMatch:param1:param2"]}ValidationForm.addValidationRule('isPasswordMatch',(value,param1,param2...)=>{if(value!==this.state.user.password){        returnfalse;}returntrue;});

You can set default error style

constructor(props,context){super(props,context);ValidationComponent.setDefaultErrorMessageStyle({color:"white",});}

API

ValidationForm

ValidationComponent