TypeScript: Header leftComponent doesn't accept iconStyle

Explain what you did (Required)

import { Header } from "react-native-elements";

const Example = () => (
  <Header
    leftComponent={{
      icon: "menu",
      iconStyle: { padding: 16, margin: -16 },
    }}
  />
);

Expected behavior (Required)

According to the docs for Header any valid props for Icon should be valid. According to the docs for Icon passing iconStyle is valid. I can also confirm that this actually works the styles are applied.

Describe the bug (Required)

No overload matches this call.
  Overload 1 of 2, '(props: PropsWithChildren<Omit<HeaderProps, keyof ThemeProps<any>>>, context?: any): ReactElement<any, any>', gave the following error.
    Type '{ iconStyle: { padding: number; margin: number; }; }' is not assignable to type 'IntrinsicAttributes & Omit<HeaderProps, keyof ThemeProps<any>> & { children?: ReactNode; }'.
      Property 'iconStyle' does not exist on type 'IntrinsicAttributes & Omit<HeaderProps, keyof ThemeProps<any>> & { children?: ReactNode; }'.
  Overload 2 of 2, '(props: HeaderProps): ReactElement<any, any>', gave the following error.
    Type '{ iconStyle: { padding: number; margin: number; }; }' is not assignable to type 'IntrinsicAttributes & ViewProps & { ViewComponent?: typeof Component; linearGradientProps?: Object; statusBarProps?: StatusBarProps; ... 13 more ...; elevated?: boolean; }'.
      Property 'iconStyle' does not exist on type 'IntrinsicAttributes & ViewProps & { ViewComponent?: typeof Component; linearGradientProps?: Object; statusBarProps?: StatusBarProps; ... 13 more ...; elevated?: boolean; }'.ts(2769)

To Reproduce (Required)

The snippet above should be enough to see the TypeScript error in VSCode, etc. If you need me to recreate that on snack, just let me know. As it’s a typing error I assumed the snack wouldn’t be necessary, but if I’ve misunderstood that, just let me know.

Further info

I guess this type here is missing iconStyle:

https://github.com/react-native-elements/react-native-elements/blob/26fc8e0e30fb3b549e0961c3b50a0ad040713d7e/src/icons/Icon.tsx#L38-L44

But it also seems to be missing brand, iconProps and maybe a handful of others if the docs are correct. I’m not quite sure how the docs are maintained, I guess they’re not rendered from the TypeScript, so I’m not quite sure how to submit an appropriate PR here. Just adding iconStyle seems like it’s not quite the right approach. But I’m open to trying my hand here if somebody can offer some guidance. (Caveat, it might take a while for me to get back to this, we work in intermittent sprints).

PS> Thanks to all the folks who make react native elements, it’s epic. ❤️ ❤️ ❤️

[khushal87]

I understand adding IconProps may add more flexibility and usability, but the admins must have done it for some reason. If I get any response I will surely modify the code to use IconProps too. By the way, if you want to add those props, you also pass the component Icon in the leftComponent as it also supports rendering a subcomponent too.

Eg:

<HeaderRNE
  leftComponent={
      <Icon brand={true} />
  }
/>

[khushal87]

Yes, it seems to be an issue, let me run it on my side and figure it out. Thanks, will keep you posted 😄