Сброс формы и фокусировка на первом поле ввода

У меня есть redux-form, который я использую в своем проекте React Native. Я пытаюсь добавить в форму некоторые тривиальные улучшения удобства использования, просто выполнив следующие действия после неудачной отправки:

• Сбросить поля ввода, чтобы они были пустыми
• Сосредоточьтесь на первом поле ввода в форме, чтобы пользователю не приходилось щелкать его вручную. В данном случае это поле ввода имени пользователя.

У меня это в основном работает. Проблема в том, что после того, как я сбрасываю форму и вручную ввожу focus() в поле ввода имени пользователя, она запускает состояния touched + error, таким образом показывая, что поле пароля является обязательным. Я думал, что сброс формы позаботится об этом, но это не так.

После того, как пользователь отправит форму, будет вызвано следующее событие жизненного цикла:

componentWillReceiveProps(nextProps) {
        if ( nextProps.network.failed_login && this.state.submitted ) {

            this.setState({ submitted: false })

            nextProps.resetLoginForm();

            // this._usernameInput._root.focus();
        }
    }

Вот как на самом деле выглядит nextProps.resetLoginForm():

function mapDispatchToProps(dispatch) {
    return {
        resetLoginForm() {
            dispatch(reset("login"))
        },
        loginUser: (username, password) => dispatch(loginUser(username, password))  
    }
}

Это то, что каждый Field вызывает в своей component опоре:

renderInput = ({ input, label, type, meta: { touched, error, warning, value } }) => {
        let textInput = null;

        return (
          <View>
            <Item error={error && touched} style={styles.inputGrp}> 
              <Icon
                active
                name={
                  input.name === "username" ? "person" : "ios-unlock-outline"
                }
                style={{ color: commonColor.contentTextColor }}
              />
              <Input
                ref={c => { textInput = c; if ( input.name === "username" ) this._usernameInput = c; } }
                placeholderTextColor={commonColor.lightTextColor}
                style={{ color: commonColor.contentTextColor }}
                placeholder={input.name === "username" ? "Username" : "Password"}
                secureTextEntry={input.name === "password" ? true : false}
                autoFocus={ input.name === "username" ? true : false }
                {...input}
              />
              {touched && error
                 ? <Icon
                     active
                     style={styles.formErrorIcon}
                     onPress={() => textInput._root.clear()}
                     name="close"
                   />
                 : <Text />}
                {touched && error
                ? <Text style={styles.formErrorText1}>
                    {error}
                  </Text>
                : <Text style={styles.formErrorText2}>error here</Text>}
            </Item>

          </View>
        );
    }

и, наконец, метод render:

render() {
        const { handleSubmit, reset } = this.props;

        const loginError = this.props.network.failed_login ? (
            <Text>Invalid username/password</Text>
        ) : null;

        const submitMarkup = this.state.submitted ? (
            <Spinner color="#663399" />
        ) : (
            <Button
                block
                style={styles.loginBtn}
                onPress={handleSubmit(this.onSubmit.bind(this))}
            >
                <Text style={{ lineHeight: 16, fontWeight: "bold" }}>
                    Login
                </Text>
            </Button>
        )

        return (
            <View>
                <Modal isVisible={this.props.isVisible}>
                    <View style={styles.backgroundContainer}>
                        <View style={styles.formContainerView}>
                            <View style={styles.formView}>
                                <Field
                                    name="username"
                                    component={this.renderInput}
                                    type="username"
                                    validate={[alphaNumeric, required]}
                                />
                                 <Field
                                    name="password"
                                    component={this.renderInput}
                                    type="password"
                                    validate={[alphaNumeric, required]}
                                />

                                {submitMarkup}

                                {loginError}

                            </View>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }

autoFocus работает при первоначальном отображении формы, но НЕ после отправки.

Каков наилучший способ убедиться, что я могу очистить свою форму, сосредоточиться на первом поле ввода и убедиться, что при наличии пустого ввода не возникает никаких ошибок, поскольку моя проверка требует, чтобы ввод пароля был непустым?