React Redux Form checkbox and dropdown field in React Native? - 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' />

Answer 1

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>
);
};