Using FastImage as an ImageComponent in React Native Elements produces a TS compilation error

[giladpn]

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

[markoj3s]

Same issue here... Any thoughts on this @DylanVann ?