How to use DropdownPicker setValue with Formik handleChange or setValueField?

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>