something wrong with redux-form in React Native

Question

So I've been on this on and off for couple of days now...

Problem is that I'm not able to print current values of pre-filled form in React-native redux form.

I've tried bunch of ways to simply print out values, but it finds them as "undefined" and thats that.

Here is some code. This is how I display form:

  render(){
const {data} = this.props
return(
  <View>
    <ScrollView style={styles.container}>
      <QuestionnaireItem title={Strings.en.fewWords}>
        <Field name={"fewWords"}
        component={TextInput}
        style={styles.fewWords}
        defaultValue={data.few_words}
        multiline={true}/>
      </QuestionnaireItem>
<!-- ... -->

This is how implement form and try to print it in state-to-props mapper:

let QuestionnaireFormRF = reduxForm({
  form: 'QuestionnaireForm'
 })(QuestionnaireFormComponent);

function mapStateToProps(state) {
  const selector = formValueSelector('QuestionnaireForm')
  const {
    fewWords,
    familyState,
    kidsQuantity
  } = selector(state, "fewWords", "familyState", "kidsQuantity")

  console.log(">>> " + fewWords)

  return {
    fewWords,
    familyState,
    kidsQuantity
  }
}

QuestionnaireFormRF = connect(mapStateToProps)(QuestionnaireFormRF)

export default QuestionnaireFormRF

And, if it helps, this is how this component is called.

    const tabArray = [
  {
    title: Strings.en.questionnaire,
    component: QuestionnaireForm,
    props: {}
  },
  {
    title: Strings.en.questionnaireForPartner,
    component: QuestionnaireForPartnerForm,
    props: {}
  }
]
export default class QuestionnaireScreen extends Component {
  constructor(props){
    super(props)
  }

  componentWillMount(){
    tabArray[0].props = { data: this.props.data, navigator: this.props.navigator }
    tabArray[1].props = { data: this.props.data, navigator: this.props.navigator}
  }

  render(){
    return(
      <TopTabsMulti tabs={tabArray} openTab={0}/>
    )
  }

}

I was a bit worried that above implementation can mess up with redux architecture, however found no solid evidence so far.

So, as I said, I'm not able to retrieve current values in any way and that console.log prints ">>> undefined" although in app values are filled properly, and even retrieved properly from props.

Answer 1

Apparently You can trigger value establishment with call of Navigation onChange() (this.props.input.onChange() in form component) function. It should be called in componentwillmount() method (at least it helps me, maybe there is a better fuction to call) and every time there is an actual change. That way form value is established and can be properly selected.