lawnstarter / react-native-picker-select

🔽 A Picker component for React Native which emulates the native <select> interfaces for iOS and Android
https://npmjs.com/package/react-native-picker-select
MIT License
1.74k stars 497 forks source link

Using react-native-vector-icons throws TypeScript error: "TS2769: No overload matches this call" #483

Open chinomnsoawazie opened 2 years ago

chinomnsoawazie commented 2 years ago

Describe the bug
After upgrading my app to use react-native 0.69.1, all places where I used react-native-vector-icons (following this example) in my app now throws the error reproduced below;

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PickerSelectProps | Readonly<PickerSelectProps>): Picker', gave the following error.
     Type '() => JSX.Element' is not assignable to type 'ReactNode'.
 Overload 2 of 2, '(props: PickerSelectProps, context: any): Picker', gave the following error.
     Type '() => JSX.Element' is not assignable to type 'ReactNode'.
  XYZSelector.tsx(96, 16): Did you mean to call this expression?
  XYZSelector.tsx(96, 16): Did you mean to call this expression?

To Reproduce
Steps to reproduce the behavior:

  1. Add RNPickerSelect to a component
  2. Using the Icon prop, add an Icon like this const dropDownIcon = () => { return <Icon name="ios-chevron-down" size={20} />; };
  3. See error

Expected behavior
Using Icon as contained in the readme should not throw a type error. It was not throwing this error until I upgraded my react-native version to 0.69.1. Screenshots
Screen Shot 2022-07-02 at 10 02 00 PM

Additional details

Reproduction and/or code sample
Can't adequately reproduce this with an expo snack as: my project uses TypeScript and hence my root component is App.tsx as opposed to their more type-permissive JavaScript based App.js.