You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the bug
I am using a ListItem from React Native Elements. The leftAvatar of that ListItem can use a default <Image/> for rendering, or a custom component. I want to use <FastImage/> as the custom component.
I actually got this to work in JavaScript but not in TypeScript!
TypeScript is giving me an error during compilation. I would like to resolve the compilation error so I can use TypeScript (and not just JavaScript) in this scenario.
I am relatively new to React Native and FastImage, so apologies if this is a newbie question, But I cannot find an answer after an extensive search.
To Reproduce
Look at the line that says ImageComponent: FastImage, in the following code. In JavaScript, this works. In TypeScript, I get a compilation error. The details of the error are immediately after the code example.
Code:
import React from 'react';
import { FlatList, ListRenderItemInfo } from 'react-native';
import { SearchBar, ListItem, ThemeProvider } from 'react-native-elements';
import TouchableScale from 'react-native-touchable-scale';
import LinearGradient from 'react-native-linear-gradient';
import FastImage from 'react-native-fast-image';
import { Styles, StyleElements } from "./Styling";
import { newPeopleType, newPeopleList, friendType, friendsList, } from './peopleLists';
export function NewPeople() {
let renderListItem =
({ item }: ListRenderItemInfo<newPeopleType>) =>
<ListItem /* uses ThemeProvider StyleElements */
Component={TouchableScale}
key={item.id}
leftAvatar={{
source: { uri: item.avatar_url },
ImageComponent: FastImage, /* <<===== here is the issue */
}}
title={item.name}
subtitle={item.subtitle}
rightTitle={item.rightTitle}
rightSubtitle={item.rightSubTitle ? item.rightSubTitle : ''}
bottomDivider />;
return <>
<FlatList
ListHeaderComponent={
<SearchBar placeholder='search...' value='hello' lightTheme round />
}
style={Styles.flatList}
data={newPeopleList}
renderItem={renderListItem}
keyExtractor={item => item.id}
/>
</>;
}
Error:
No overload matches this call.
Overload 1 of 2, '(props: Readonly<ListItemProps>): ListItem', gave the following error.
Type '(ComponentClass<FastImageProps, any> & FastImageStaticProperties) | (FunctionComponent<FastImageProps> & FastImageStaticProperties)' is not assignable to type 'ComponentClass<{}, any> | undefined'.
Type 'ComponentClass<FastImageProps, any> & FastImageStaticProperties' is not assignable to type 'ComponentClass<{}, any> | undefined'.
Type 'ComponentClass<FastImageProps, any> & FastImageStaticProperties' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<FastImageProps, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<FastImageProps, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Property 'source' is missing in type 'Readonly<{}>' but required in type 'Readonly<FastImageProps>'.
Overload 2 of 2, '(props: ListItemProps, context?: any): ListItem', gave the following error.
Type '(ComponentClass<FastImageProps, any> & FastImageStaticProperties) | (FunctionComponent<FastImageProps> & FastImageStaticProperties)' is not assignable to type 'ComponentClass<{}, any> | undefined'.
Type 'ComponentClass<FastImageProps, any> & FastImageStaticProperties' is not assignable to type 'ComponentClass<{}, any> | undefined'.
Type 'ComponentClass<FastImageProps, any> & FastImageStaticProperties' is not assignable to type 'ComponentClass<{}, any>'.ts(2769)
index.d.ts(57, 5): 'source' is declared here.
Expected behavior
I expect the above code to work (as it does in JavaScript) without a compilation error being produced by TypeScript. Alternatively, should I be writing the code differently?
Dependency versions
React Native version: 0.62.2
React version: 16.11.0
React Native Fast Image version: 8.1.5
The text was updated successfully, but these errors were encountered:
Describe the bug
I am using a
ListItem
from React Native Elements. TheleftAvatar
of thatListItem
can use a default<Image/>
for rendering, or a custom component. I want to use<FastImage/>
as the custom component.I actually got this to work in JavaScript but not in TypeScript!
TypeScript is giving me an error during compilation. I would like to resolve the compilation error so I can use TypeScript (and not just JavaScript) in this scenario.
I am relatively new to React Native and
FastImage
, so apologies if this is a newbie question, But I cannot find an answer after an extensive search.To Reproduce
Look at the line that says
ImageComponent: FastImage,
in the following code. In JavaScript, this works. In TypeScript, I get a compilation error. The details of the error are immediately after the code example.Code:
Error:
Expected behavior
I expect the above code to work (as it does in JavaScript) without a compilation error being produced by TypeScript. Alternatively, should I be writing the code differently?
Dependency versions
The text was updated successfully, but these errors were encountered: