How to solve omit type of DropDownPicker error?

[WooMinGy]

In this library, 'open', 'setOpen' properties are essential properties on DropDownPicker. But I don't want use useState in a module. So I wanted to use those two properties in that I made DropDownPicker component.

And I gave a type for props what I omitted those two properties. But I got this error. Can u guys help me to solve this error?

---

Type '{ multiple?: boolean; onChangeValue?: ((value: ValueType) => void) | ((value: ValueType[]) => void); onSelectItem?: ((item: ItemType) => void) | ((items: ItemType<...>[]) => void); ... 107 more ...; setOpen: Dispatch<...>; }' is not assignable to type 'IntrinsicAttributes & DropDownPickerProps'. Type '{ multiple?: boolean; onChangeValue?: ((value: ValueType) => void) | ((value: ValueType[]) => void); onSelectItem?: ((item: ItemType) => void) | ((items: ItemType<...>[]) => void); ... 107 more ...; setOpen: Dispatch<...>; }' is not assignable to type 'DropDownPickerMultipleProps'. Types of property 'multiple' are incompatible. Type 'boolean' is not assignable to type 'true'.

[adumat]

have you found a way to solve this error?

[rodgomesc]

i think that this typings is not correct, i'm typing my component like that and typescript is happy

import DropDownPicker, {
  DropDownPickerProps,
  ValueType,
} from 'react-native-dropdown-picker';

type ICVDropDownPickerProps = DropDownPickerProps<ValueType>;

const CVDropDownPicker = ({ ...rest }: ICVDropDownPickerProps) => {
  const [test, setTest] = React.useState(false);
  return <DropDownPicker open={test} setOpen={setTest} {...rest} />;
};

export default CVDropDownPicker;

[rarenatoe]

i think that this typings is not correct, i'm typing my component like that and typescript is happy

import DropDownPicker, {
  DropDownPickerProps,
  ValueType,
} from 'react-native-dropdown-picker';

type ICVDropDownPickerProps = DropDownPickerProps<ValueType>;

const CVDropDownPicker = ({ ...rest }: ICVDropDownPickerProps) => {
  const [test, setTest] = React.useState(false);
  return <DropDownPicker open={test} setOpen={setTest} {...rest} />;
};

export default CVDropDownPicker;

I get:

'open' is specified more than once, so this usage will be overwritten . ts(2783)

[PedroDousseau]

If you dig into DropDownPickerProps you'll see that:

  export type DropDownPickerProps<T> = (
    | DropDownPickerSingleProps<T>
    | DropDownPickerMultipleProps<T>
  ) &
    DropDownPickerBaseProps<T>;

You need to use Distributive Omit to make it work on that union of types: https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types

type DistributiveOmit<T, K extends keyof any> = T extends any
  ? Omit<T, K>
  : never;

export type testProps<T extends ValueType> = DistributiveOmit<DropDownPickerProps<T>, 'open' | 'setOpen'>;