Icon prop type error

[simvi]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-picker-select@8.0.4 for the project I'm working on.

The type of Icon was invalid for Icon prop.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-picker-select/index.d.ts b/node_modules/react-native-picker-select/index.d.ts
index 9f111bc..09644ca 100644
--- a/node_modules/react-native-picker-select/index.d.ts
+++ b/node_modules/react-native-picker-select/index.d.ts
@@ -83,7 +83,7 @@ export interface PickerSelectProps {
     pickerProps?: CustomPickerProps;
     touchableDoneProps?: CustomTouchableDoneProps;
     touchableWrapperProps?: CustomTouchableWrapperProps;
-    Icon?: React.ReactNode;
+    Icon?: React.FC;
     InputAccessoryView?: React.ReactNode;
 }

This issue body was partially generated by patch-package.

[tdraper-dev]

@simvi Do you recall if running patch-package for this library was an incredibly slow operation? I'm currently trying to run a patch on it myself and it seems like it's hanging.

[hrdyjan1]

@simvi Do you recall if running patch-package for this library was an incredibly slow operation? I'm currently trying to run a patch on it myself and it seems like it's hanging.

We were also struggling with npm, using yarn solved the problem.

[devinMcArthur]

To anyone interested, this is why Icon must be a React.FC, it is being called like a component here, not a ReactNode.

If Icon was truly meant to be a ReactNode, renderIcon would look like this:

renderIcon() {
    const { style, Icon } = this.props;

    if (!Icon) {
        return null;
    }

    return (
        <View
            testID="icon_container"
            style={[defaultStyles.iconContainer, style.iconContainer]}
        >
            {Icon}
        </View>
    );
}

P.S. To get around this issue I created a Functional Component to input to Icon typed as a React.FC with a // @ts-expect-error.

[lfkwtz]

dupe of #478 - prs to fix this are welcome