react native form validation

Validation

const validate = (val, rules, connectedValue) => {
    let isValid = true;
    for (let rule in rules) {
      switch (rule) {
        case "isEmail":
          isValid = isValid && emailValidator(val);
          break;
        case "minLength":
          isValid = isValid && minLengthValidator(val, rules[rule]);
          break;
        case "equalTo":
          isValid = isValid && equalToValidator(val, connectedValue[rule]);
          break;
        case "notEmpty":
          isValid = isValid && notEmptyValidator(val);
          break;
        default:
          isValid = true;
      }
    }
    return isValid;
  };
  
  const emailValidator = val => {
    return /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/.test(
      val
    );
  };
  
  const minLengthValidator = (val, minLength) => {
    return val.length >= minLength;
  };
  
  const equalToValidator = (val, checkValue) => {
    return val === checkValue;
  };
  
  const notEmptyValidator = val => {
    return val.trim() !== "";
  };
  
  export default validate;






//another functionless component for my textinput

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

const defaultInput = props => (
    <TextInput
        underlineColorAndroid= "transparent"
        ref={input => { this.textInput = input }}
        {...props}
        style={[styles.input, props.style, !props.valid && props.touched ? styles.invalid : null]}
    />
);


const styles = StyleSheet.create({
    invalid: {
        borderBottomColor: "red"
    },
    input: {
        width: "100%",
        borderBottomWidth: 1,
        borderColor: "#000",
        padding: 5,
        marginTop: 8,
        marginBottom: 8
      },
  });



// this is the execution of everything

class SignIn extends Component {
    //state
    state = {
        showAlert: false,
        controls: {
            email: {
                value: "",
                valid: false,
                validationRules: {
                    isEmail: true
                },
                touched: false
            },
            password: {
                value: "",
                valid: false,
                validationRules: {
                    minLength: 6
                },
                touched: false
            },

        }
    }
    
    
        updateInputState = (key, value) => {
        //comparing the confirm password with password, the key represents email, password etc

        this.setState(prevState => {
            return {
                controls: {
                    ...prevState.controls,
                    [key]: {
                        ...prevState.controls[key],
                        value: value,
                        valid: validate( value, prevState.controls[key].validationRules ),
                        touched: true
                    }
                }
            };
        });
    };
    
    render(){
        return(
            <View>
                  <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                    <View style={styles.shape}>
                        <DefaultInput
                            placeholder='Enter your email'
                            autoCorrect={false}
                            autoFocus={false}
                            returnKeyType='next'
                            keyboardType='email-address'
                            style={styles.textInput}
                            value={this.state.controls.email.value}
                            onChangeText={val => this.updateInputState("email", val)}
                            valid={this.state.controls.email.valid}
                            touched={this.state.controls.email.touched}
                        />
                        <DefaultInput
                            placeholder='Enter your password'
                            autoCorrect={false}
                            autoFocus={false}
                            keyboardType='default'
                            secureTextEntry={true}
                            style={styles.textInput}
                            borderBottomColor='black'
                            value={this.state.controls.password.value}
                            onChangeText={val => this.updateInputState("password", val)}
                            valid={this.state.controls.password.valid}
                            touched={this.state.controls.password.touched}
                        />
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
}