React Native와 Redux Form의 조합으로 키보드 입력 중에 submit해도 입력 내용이 반영되지 않는 문제

React Native와 Redux Form을 조합해(물론 Redux는 사용) 이용했을 때에 약간의 문제를 만났기 때문에 투고합니다.
덧붙여서 iPhone에서 밖에 확인하고 있지 않으므로, Android에서 같은가는 불명합니다.

문제

로그인 폼 등으로 TextInput에 입력할 때, 폼에 focus된 채로 로그인 버튼을 누르면, 입력중의 문자는 dispatch 되지 않는다.
다음 스크린샷과 같은 상황입니다.



이 상황이라면 로그인 버튼을 눌러도 비밀번호가 입력되지 않은 취급이 되어, 검증 에러가 표시되어 버립니다.

해결 방법

Redux Form의 Field input props에 onChange()가 있기 때문에 TextInput의 onChangeTextprop에 전달하면 해결됩니다.
Redux Form -Field

다음과 같이 TextInputForm의 파트를 만듭니다. 관계없는 부분은 깎고 있습니다.

TextInputForm을 이용한 전체 코드는 다음과 같습니다. @decorator 사용하고 있습니다.

const TextInputForm = (props) => {
  const { input, style, label, ...inputProps } = props
  return (
    <View>
      <Text>{label}</Text>
      <TextInput
        {...inputProps}
        style={style}
        onChangeText={text => input.onChange(text)} //これを追加
      />
    </View>
  );
}

import React, { Component } from 'react'
import { reduxForm, Field } from 'redux-form'
import { Text, TextInput, View, TouchableOpacity } from 'react-native'

@reduxForm({
  form: 'login',
  validate: values => {
    const errors = {}
    if (!values.id) errors.id = 'IDを入力してください'
    if (!values.password) errors.password = ' パスワードを入力してください'
    return errors
  }
})
export default class Login extends Component {
  login = values => {
    // 何か処理
  }

  render() {
    const { handleSubmit, error } = this.props
    return (
      <View style={styles.root}>
        <View>
          <Field
            name='id'
            label='ID'
            style={styles.input}
            component={TextInputForm}
          />
        </View>
        <View>
          <Field
            name='password'
            label='パスワード'
            style={styles.input}
            component={TextInputForm}
            secureTextEntry
          />
        </View>
        <TouchableOpacity onPress={handleSubmit(this.login)} style={styles.button}>
          <Text style={{color: '#fff', fontSize: 20}}>ログイン</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

이것으로 해결하려면 하지만 onChangeText가 호출 될 때마다 dispatch되어 있기 때문에 성능에 영향을 줄 수 있습니다.