Type warning in Flaslist's renderItem prop

Question

I am getting a type warning in an application I developed with React native. I get the following warning in Flaslist's renderItem prop. How can I fix this warning?

Warning:

Type 'import("/Users/mac/Desktop/project/pokeApp/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ListRenderItem<import("/Users/mac/Desktop/project/pokeApp/api/pokeapi").Pokemon>' is not assignable to type 'import("/Users/mac/Desktop/project/pokeApp/node_modules/@shopify/flash-list/dist/FlashListProps").ListRenderItem<import("/Users/mac/Desktop/project/pokeApp/api/pokeapi").Pokemon>'. Types of parameters 'info' and 'info' are incompatible. Property 'separators' is missing in type 'import("/Users/mac/Desktop/project/pokeApp/node_modules/@shopify/flash-list/dist/FlashListProps").ListRenderItemInfo<import("/Users/mac/Desktop/project/pokeApp/api/pokeapi").Pokemon>' but required in type 'import("/Users/mac/Desktop/project/pokeApp/node_modules/@react-native/virtualized-lists/Lists/VirtualizedList").ListRenderItemInfo<import("/Users/mac/Desktop/project/pokeApp/api/pokeapi").Pokemon>'.ts(2322) VirtualizedList.d.ts(79, 3): 'separators' is declared here. FlashListProps.d.ts(37, 5): The expected type comes from property 'renderItem' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<FlashList> & Pick<Readonly<FlashListProps>, "pointerEvents" | ... 171 more ... | "persistentScrollbar"> & InexactPartial<...> & InexactPartial<...>'

import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Image, ActivityIndicator, ListRenderItem } from 'react-native'
import React, { useEffect, useState } from 'react'
import { Link } from 'expo-router'
import { Pokemon, getPokemon } from '@/api/pokeapi'
import { Ionicons } from '@expo/vector-icons';
import { useQuery } from '@tanstack/react-query';
import { FlashList } from "@shopify/flash-list";

const Page = () => {

    const pokemonQuery = useQuery({
        queryKey: ["pokemon"],
        queryFn: getPokemon,
        refetchOnMount: false
    })

    const renderItem: ListRenderItem<Pokemon> = ({ item }) => {
        return (
            <Link href={`/(pokemon)/${item.id}`} key={item.id} asChild>
                <TouchableOpacity>
                    <View style={styles.item}>
                        <Image source={{ uri: item.image }} style={styles.preview} />
                        <Text style={styles.itemText} >{item.name}</Text>
                        <Ionicons name='chevron-forward' size={24} />
                    </View>
                </TouchableOpacity>
            </Link>
        )
    }

    return (
        <View style={{ flex: 1 }}>
            {pokemonQuery.isLoading && <ActivityIndicator style={{ marginTop: 30 }} />}
            <FlashList
                data={pokemonQuery.data}
                renderItem={renderItem}
                ItemSeparatorComponent={() => <View style={{ height: 1, width: "100%", backgroundColor: "#dfdfdf" }} />}
                estimatedItemSize={100}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    item: {
        padding: 10,
        height: 100,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center"
    },
    itemText: {
        fontSize: 18,
        textTransform: "capitalize",
        flex: 1
    },
    preview: {
        width: 100,
        height: 100
    }
})
export default Page

Answer 1

The FlashList has its own types. For the prop renderItem that has a type ‎ListRenderItem, maybe you can't use the ListRenderItem from react-native as a type to the FlashList's renderItem. Try not to pass the type to the renderItem or try to type the parameters.

const renderItem = ({ item }: Pokemon) => {
  return (
    <Link href={`/(pokemon)/${item.id}`} key={item.id} asChild>
      <TouchableOpacity>
        <View style={styles.item}>
          <Image source={{ uri: item.image }} style={styles.preview} />
          <Text style={styles.itemText} >{item.name}</Text>
          <Ionicons name='chevron-forward' size={24} />
        </View>
      </TouchableOpacity>
    </Link>
  )
}