How to use DropdownPicker setValue with Formik handleChange or setValueField? - react-native

Question

How can i use Dropdown picker setValue with Formik? handleChange or setValueField doesn't work properly. Any suggestions?
const [open, setOpen] = useState(false);
const items = [
{ label: 'Apple', value: 'apple' },
{ label: 'Banana', value: 'banana' },
];
return (
<Formik
initialValues={{ fruits: [] }}
onSubmit={values => console.log(values)}
>
{({ handleChange, handleSubmit, values }) => (
<View>
<DropdownPicker
schema={{ label: 'label', value: 'label' }}
open={open}
setOpen={setOpen}
value={values.fruits}
setValue={handleChange('fruits')}
items={items}
multiple
/>
<Button onPress={handleSubmit} title="Submit" />
</View>
)}
</Formik>
);
};```

Answer 1

You could wrap DropdownPicker in another component and use useFormikContext and useField formik hooks to be able to use it, take a look in this example:
import { useFormikContext, useField } from "formik";
import React, { useState } from "react";
import DropDownPicker from "react-native-dropdown-picker";
const DropDownFormik = ({ ...props }) => {
const [openProvider, setOpenProvider] = useState(false);
const { setFieldValue } = useFormikContext();
const [field] = useField(props);
return (
<DropDownPicker
{...field}
{...props}
value={field.value}
open={openProvider}
setOpen={setOpenProvider}
setValue={(val) => {
setFieldValue(field.name, val());
}}
/>
);
};
export default DropDownFormik;
to use this component just specify the name in your form:
<Formik
initialValues={{ level: ""}}
onSubmit={(values) => console.log(values)}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<View>
<DropDownFormik
zIndex={3000}
name="level"
placeholder="Notification Level"
items={notificationLevels}
/>
</View>
)}
</Formik>