Typescript error for Icon

[kickbk]

Getting

function(): JSX.Element
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'.ts(2769)
[SelectTime.tsx(116, 18): ]()Did you mean to call this expression?

when using like so:

<RNPickerSelect
  ...
  Icon={() => {
    return <Ionicons ... />;
  }}
/>

Any recommendations?

[samuel-anderson]

Any update on this? I'm getting the same issue.

[nicolaswbam]

I had the same issue, fixed it by updating typescript to version 4.7.3 and @types/react to 17.0.43 .

The type of Icon is React.ReactNode, but it is rendered as <Icon/> which is a component.

However you should not create an inline component. Instead, you can create a component in the same file as

const CustomPickerIcon = () => {
  return <MyIcon />;
}; 
...
...
...
 <RNPickerSelect
        ...
        Icon={CustomPickerIcon}
      />

[WahidN]

@nicolaswbam that still gives me the TS error

[Yupeng-li]

@WahidN It's a bug of the type mentioned here https://github.com/lawnstarter/react-native-picker-select/issues/488

[KhimGurung]

Passing a function or component is working in my case but why it is failing my test.

  const renderIcon = () => {
    return Platform.OS === "android" ? null : (
      <Icon name="caretdown"
      />
    );
  };

    <PickerSelect
      Icon={renderIcon()}
      {...props}
    />

I am getting:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

But if I do like bellow, the test passes but shows error. Weird part is I can run my application.

    <PickerSelect
      Icon={() => {
        return Platform.OS === "android" ? null : (
          <Ico name="caretdown" />
        );
      }}
      {...props}
    />

I can update Icon type from React.ReactNode to React.FC and everything works fine but I dont want to change node_modules file.

[lfkwtz]

anyone want to open a pr for this?

[bbun0639]

I can update Icon type from React.ReactNode to React.FC and everything works fine but I dont want to change node_modules file.

It's work fine.

[lfkwtz]

can some of y'all review this mr?

529