Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Native AsyncValidation undefined values

See original GitHub issue

Hi, I’m Using React Native and I tried use AsyncValidation, but when asyncValidate is called the value of email Field is undefined, this happen when use asyncBlurFields, the fields entry in the vector are undefined

SignupForm Code

const validate = values => {
  const errors = {}
  if (!values.email) {
    errors.email = 'Campo requerido'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Email inválido'
  }
  if (!values.password) {
    errors.password = 'Campo requerido'
  }
  return errors
}

const asyncValidate = (values) => {
  const errors = {};
  console.log(values);
  return axios.get(`${api.uri}/auth/${values.email}/exists`)
    .then( res => {
      console.log(res);
    })
    .catch( err => {
      console.log(err);
    })
}

const SignupForm = ({
  onSwitch,
  submitting,
  error,
  handleSubmit,
  SignupServer, }) => {

  const ColoredRaisedButton = MKButton.coloredButton()
    .withBackgroundColor('orange')
    .withStyle(styles.submitButton)
    .build();

  return (
    <View style={[styles.signupForm]}>
      <Text style={styles.title}>Regístrate</Text>
      {error && <Text style={styles.error}>
        {error}
      </Text>}
      <Field
        name='email'
        label='Email'
        dense={true}
        component={TextField} />
      <Field
        name='password'
        label='Password'
        dense={true}
        isPassword={true}
        component={TextField} />
      <ColoredRaisedButton
        onPress={handleSubmit(SignupServer)}>
        { submitting ?
          <ActivityIndicator
            color="white"
            size={32} /> :
            <Text style={{color: 'white', fontWeight: 'normal', fontSize: 24,}}>Crear Cuenta</Text> }
      </ColoredRaisedButton>
    </View>
  )
} 
export default reduxForm({
  form: 'signup',
  validate,
  asyncValidate,
  asyncBlurFields: ['email'],
})(SignupForm)

TextField Component

class TextField extends Component {

  constructor(props){
    super(props)
  }

  render(){
    let {
      input: { value, onChange, onFocus, onBlur, ...restInput },
      meta: { asyncValidating, touched, error, invalid, active, visited },
      isPassword,
      label,
      duration,
      borderColor,
      dense,
      textColor,
      textFocusColor,
      ...props,
    } = this.props;
    if(touched && error){
      this.refs.underline.expandLine()
    }
    return (
      <View>
        <View style={[dense ? styles.denseWrapper : styles.wrapperInput]}>
          <TextInput
              style={[ dense ? styles.denseTextInput : styles.textInput, {
                color: textColor
              } : {}, (active && textFocusColor) ? {
                color: textFocusColor
              } : {},]}
              onChangeText={onChange}
              onFocus={(e) => {
                this.refs.label.floatLabel();
                this.refs.underline.expandLine();
                onFocus(e);
              }}
              onBlur={(e) => {
                !value.length ? this.refs.label.sinkLabel() : null;
                error ? this.refs.underline.expandLine() : this.refs.underline.shrinkLine() ;
                onBlur(e);
              }}
              secureTextEntry={isPassword ? isPassword : false}
              {...restInput}
              {...props} />
          <FloatingLabel
            ref='label'
            label={label}
            dense={dense}
            labelColor={'gray'}
            duration={duration}
            highlightColor={ touched && error ? 'red' : 'blue' }
            isFocused={ active ? true : active }
            hasValue={value ? true : false } />
          <Underline
            ref="underline"
            duration={duration}
            borderColor={'gray'}
            highlightColor={ touched && error ? 'red' : 'blue' } />
        </View>
        <View style={styles.wrapperErr}>
          {touched && (error && <Text style={styles.textErr}>{error}</Text>)}
        </View>
      </View>);
  }
}

alt text

When asyncValidate is called the value of email in the state is ‘test@test.cl’ but in the function is undefined, but if I change asyncBlurFields to password the result is

alt text