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

How to redefine prop for React class

$
0
0

I´m using Avatar from react-native-elements and the ImageComponent prop is typed as React.ComponentClass (IntelliSense report type React.ComponentClass<{}, any>)

When using a functional component (with prop key) I get red squiggles under ImageComponent:

<Avatar    rounded    size={c.styles.avatarSize}    containerStyle={{ margin: c.styles.marginLRTB / 2 }}    placeholderStyle={{ backgroundColor: colors.background }}    ImageComponent={() => AvatarImage(key)}  />

Type '() => JSX.Element' is not assignable to type 'ComponentClass<{}, any>'.ts(2769)

AvatarImage:

  const AvatarImage = (key: string) => (<FastImage      style={{ width: '100%', height: '100%' }}      source={sourcesState[key].category === 'In-app' ? avatars[key as QuotesListKeys] : { uri: sourcesState[key].imageUrl }}    />  );

How can I fix this typescript error? I´m still learning typescript and need some help with this one.

I´ve tried to define a new class/interface that extend Avatar/AvatarProps:

  type MyAvatarProps = Omit<AvatarProps, 'ImageComponent'> & { ImageComponent: FC<{ key: string }> };  class MyAvatar extends Avatar<MyAvatarProps> {}

I get typescript error Type 'Avatar' is not generic.ts(2315)

How do I extend Avatar with MyAvatarProps when it's not generic?

Or is there other/better ways to handle this?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



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