I have encountered a type warning in my React Native application. The warning is related to the renderItem prop of FlashList. How can I resolve this issue?
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 compatible with type 'import("/Users/mac/Desktop/project/pokeApp/node_modules/@shopify/flash-list/dist/FlashListProps").ListRenderItem<import("/Users/mac/Desktop/project/pokeApp/api/pokeapi").Pokemon>'. The parameters 'info' in both types are incompatible. The 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 it is 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) The declaration for 'separators' is in VirtualizedList.d.ts(79, 3). The expected type is from the property 'renderItem' declared 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