React Redux Form checkbox and dropdown field in React Native?

Question

I am trying to build a form in React Native using React Redux Form but I can use the <TextInput> for Email & Password but now I would like to use some checkboxes and dropdowns. Their documentationm doesn't provide an React Native guideline or any examples as they use simply <Input> tag for any inputs but how do i use this in React Native?

Here is my field render I use for email:

const renderField = ({ label, type, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
  return (
    <View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
      <View style={{ flexDirection: 'row', height: 30, alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
        <FontAwesome name='email-outline' size={18} color='#cccccc' style={{ paddingLeft: 2 }} />
        <TextInput style={{ height: 37, width: 280, paddingLeft: 10, fontSize: 20 }}
          keyboardType={keyboardType} onChangeText={onChange} {...restInput}
          placeholder={label}
        >
        </TextInput>
      </View>
      {touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
    </View>);
}; 

<Field keyboardType='email-address' type='email' label='Email' component={renderField} name='email' />

Vasyl Rohozha · Accepted Answer · 2018-05-16 22:31:45Z

2

And what's the problem?

Just create a checkboxField component that you'll use instead of renderField in the places you need. And simply use the onChange function from the props to set a value and value as the value itself.

Here is an example that would be easier to understand:

const renderField = ({ input: { onChange, value } }) => {
   return (
      <View>
         <Switch 
           onValueChange={(value) => onChange(value)} 
           value={value} 
         /> 
      </View>
   );
};

answered May 16, 2018 at 22:31

Vasyl Rohozha

3321 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Redux Form checkbox and dropdown field in React Native?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related