Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

ReactElement type casting

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>