This is more of a Typescript
and React
question but for full disclosure, I'll mention that I ended up here while trying to create a custom header using react-navigation.
I have a simple ImageButton
(functional) component, which accepts the following props:
export interface ImageButtonProps extends TouchableOpacityProps { transparent?: boolean;}
My custom header looks (roughly) like this:
export default function Header(props: StackHeaderProps) { const options = props.scene.descriptor.options; const HeaderRight = options.headerRight as (() => ReactElement<ImageButtonProps>); return (<HeaderRight transparent={true}/>); // <-- Typescript complains here}
It's safe to assume that options.headerRight
will always return an ImageButton
, which in fact renders just fine. The only issue is that the property transparent
is always undefined and also Typescript throws the following error:
TS2322: Type '{ transparent: boolean; }' is not assignable to type 'IntrinsicAttributes'. Property 'transparent' does not exist on type 'IntrinsicAttributes'.
So my question is, how can I properly cast a ReactElement
to my custom component, ImageButton
and its props?