title: ReactNative : redux-form validating inputs immediately
body: <p>I am trying to use <code>redux-form</code> with <code>react-native</code>. I tried to do something what I did when I used <code>redux-form</code>s for web apps. I am trying to validate the form using <code>redux-form</code>, but I am immediately seeing validations instead of it triggering <code>onBlur</code> or when focus changes.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { reduxForm, Field } from 'redux-form';
  import {
    View,
    TextInput,
    TouchableHighlight,
    Text,
    KeyboardAvoidingView,
    StyleSheet,
  } from 'react-native';
  
  
  const renderTextInput = ({
    input: { onChange, ...restInput }, // eslint-disable-line
    placeholder, // eslint-disable-line
    autoCapitalize, // eslint-disable-line
    maxLength, // eslint-disable-line
    isPassword, // eslint-disable-line
    isEmail, // eslint-disable-line
    meta: { touched, error, warning }, // eslint-disable-line
  }) =&gt; (
    &lt;View style={{ width: '100%', paddingBottom: 15 }}&gt;
      &lt;TextInput
        onChangeText={onChange}
        style={[styles.textInput, { width: '100%' }]}
        placeholder={placeholder}
        autoCapitalize={autoCapitalize}
        maxLength={maxLength}
        secureTextEntry={isPassword || false}
        keyboardType={isEmail ? 'email-address' : 'default'}
        {...restInput}
      /&gt;
      {error &amp;&amp; &lt;Text style={{ color: 'red' }}&gt;{error}&lt;/Text&gt;}
    &lt;/View&gt;
  );
  
  class SignUp extends Component {
    static propTypes = {
      handleSubmit: PropTypes.func.isRequired,
    }
  
    onFormSubmit = (values) =&gt; {
      alert(JSON.stringify(values));
    }
  
    render() {
      const { handleSubmit } = this.props;
      return (
        &lt;KeyboardAvoidingView
          style={styles.container}
          behavior="padding"
          resetScrollToCoords={{ x: 0, y: 0 }}
          scrollEnabled={false}
        &gt;
          &lt;Field
            name="email"
            placeholder="Email Address"
            autoCapitalize="none"
            isEmail
            maxLength={50}
            component={renderTextInput}
          /&gt;
          &lt;Field
            name="password"
            placeholder="Password"
            maxLength={50}
            isPassword
            autoCapitalize="none"
            component={renderTextInput}
          /&gt;
          &lt;TouchableHighlight
            onPress={() =&gt; handleSubmit(this.onFormSubmit)}
            underlayColor="transparent"
            style={{ height: 40, width: '100%', backgroundColor: '#005abc' }}
          &gt;
            &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
              &lt;Text style={{ color: 'white', fontSize: 18 }}&gt;
                Sign Up!
              &lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableHighlight&gt;
        &lt;/KeyboardAvoidingView&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    // styles
  });
  // Why is this triggering immediately as the screen loads ?
  const validate = (values) =&gt; {
    alert(JSON.stringify(values));
    const errors = {};
    if (!values.email) errors.firstName = 'Email is required...';
    return errors;
  };
  
  export default reduxForm({
    form: 'signUpForm',
    validate,
  })(SignUp);
  </code></pre>
  
  <p>Packages:</p>
  
  <pre><code>"react": "16.0.0-beta.5",
  "react-native": "0.49.3",
  "react-native-navigation": "^1.1.236",
  "react-redux": "^5.0.5",
  "redux": "^3.7.2",
  "redux-form": "^7.1.1",
  </code></pre>
  
  <p>Note: The alert in the image below is when app is loaded first time and in the background you can see the validation error being shown.</p>
  
  <p><a href="https://i.stack.imgur.com/wUaPh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wUaPh.png" alt="enter image description here"></a></p>
  
  <p>Any help is appreciated. Thank you.</p>