redux-form initialValues being created as a Map

Question

I've got a redux-form and I'm trying to initialize the form using initialValues. Given the following code, the form isn't being populated with either the name or the age:

const EmployeesForm = reduxForm({
  form: 'addEmployee',
  enableReinitialize: true
})(EmployeesFormComponent)

export default connect((state, ownProps) => {
  const initialValues = { name: 'Jason', age: 24 }
  return {
    initialValues: initialValues
  }
})(EmployeesForm)

But in the web dev console when inspecting the next state on redux, I can see that form.values and form.initial are both Map objects that hold those initialValue values.

How should I be transforming the object so that it "fits" into the form. BTW I'm using: import { Field, reduxForm } from 'redux-form/immutable' and it's redux-form 6.8.0.

Answer 1

It could be a problem with your react-native Field definition.

<Field name="name" component={TextInput} />
<Field name="age" component={TextInput} />

Make sure this is the correct definition of your form. if you can please add the component Markup as well, so that it will become easy to debug.

Also one more tricky portion in react-native with redux-form is onChangeText callback instead of onChange so in order to account for that you will have to create a wrapper around the react-native TextInput component

const TextInputNative = ({ input: { onChange, ...inputProps }}) => {
    return <TextInput onChangeText={onChange} 
            {...inputProps} />
}

const EmployeesFormComponent = () => (
       <Field name="name" component={TextInputNative} />
       <Field name="age" component={TextInputNative} />
);

This also could be preventing your form from getting updated with initial values.