How to pass value to placeholder to textInput in redux-form?

Question

So I'm creating a login form with two fields, username & password respectively; and I would like to pass placeholder to each of these Field. however, no matter what I try, the placeholder is not shown.

Code

const submit = values => {
  console.log('submitting form', values)
};

const renderInput = ({ input: { onChange, ...restInput } }) => {
  return <TextInput style = { styles.input } onChangeText = { onChange } { ...restInput }/>
};

const LoginForm = props => { const { handleSubmit } = props;
  return (
    <View style={styles.container}>
      <View>
        <Field name="email"    placeholder="Email"    component={renderInput} />
        <Field name="password" placeholder="Password" component={renderInput} />
      </View>

      <View>
        <View style={styles.loginBtnContainer}>
          <TouchableOpacity style={styles.button} onPress={handleSubmit(submit)}>
            <Text style={{fontSize: 30, color: '#17a2e0'}}>Login</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

export default reduxForm({
  form: 'test'
})(LoginForm)

As you can see, the two fields with name email & password respectively are not present in TextInput in renderInput function.

Answer 1

In your component renderInput in its props you will have available the ones applied to the component Field. As documentation states, you just have to apply the attribute placeholder in the TextInput component to get placeholder rendered.

const renderInput = ({ placeholder, input: { onChange, ...restInput } }) => {
    return <TextInput placeholder={placeholder} style = { styles.input } onChangeText = { onChange } { ...restInput }/>
};