Perfomance problem with Flatlist in React native - reactjs

Question

What I want
I'm trying to use a FlatList to render an array of objects that comes from server(I'm using Apollo and Graphql to get data from server), but I'm getting a message from console:
VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"contentLength": 2392, "dt": 4527, "prevDt": 2777}
I followed the message and wrapped my renderItem in React.memo, I'm using functional components so I cant use PureComponent or shouldComponentUpdate, but after this the problem persist.
What I have
Component structure
HomeScreen (responsible for obtaining the data from the server)
└── ProductList (FlatList Wrapper)
└── ProductListItem (renderItem)
HomeScreen.js
// HomeScreen.js
function HomeScreen({navigation}) {
const {data} = useHomeScreenProductsQuery({}) // this hook get data from server with apollo useQuery method
// just print something on console but it can do something more complex
const handleOnPressItem = () => console.log('go to product')
return (
<ProductList
horizontal
numColumns={2}
products={data?.collection?.products?.edges.map(e => e.node) ?? []}
onPressItem={handleOnPressItem}
/>
)
}
ProductList.js
// ProductList.js
import React from 'react'
import {Dimensions, FlatList, View} from 'react-native'
import {ProductListItem} from '../ProductListItem'
function ProductList({
products,
horizontal = false,
numColumns = 1,
onPressItem = () => {},
}) {
const getLayoutManager = () => {
const layoutManager = {}
if (horizontal) {
layoutManager.horizontal = true
layoutManager.showsHorizontalScrollIndicator = false
layoutManager.ItemSeparatorComponent = ProductListItemSeparator
layoutManager.contentContainerStyle = {padding: spacing.base}
} else {
layoutManager.numColumns = numColumns
}
return layoutManager
}
const renderProductListItem = ({item}) => {
const columns = horizontal ? 2 : numColumns
return (
<ProductListItem
product={item}
itemContainerStyle={{
width: dimens.common.WINDOW_WIDTH / columns,
}}
columnWrapperStyle={{flexDirection: 'column'}}
onPressItem={onPressItem}
/>
)
}
return (
<FlatList
{...getLayoutManager()}
// Pass a changing value to the `key` prop to update the columns number on the fly
key={numColumns}
data={products}
renderItem={renderProductListItem}
/>
)
}
ProductListItem.js
// ProductListItem.js
function ProductListItem({
product,
itemContainerStyle = {},
columnWrapperStyle = {},
onPressItem = () => {},
}) {
const price = product.pricing?.priceRange?.start
const priceUndiscounted = product.pricing?.priceRangeUndiscounted?.start
const getProductPrice = () => {
if (equal(price, priceUndiscounted)) {
// render a price formated with $ symbol
return <TaxedMoney taxedMoney={price} defaultValue={0} category="h6" />
}
return (
<>
<View style={styles.priceContainer}>
<Text category="c2" appearance="hint">
Antes
</Text>
<TaxedMoney
taxedMoney={priceUndiscounted}
category="c2"
appearance="hint"
style={styles.priceUndiscounted}
/>
</View>
<TaxedMoney taxedMoney={price} category="h5" />
</>
)
}
const renderItemHeader = () => (
<View style={styles.itemHeader}>
// this is only a wrapper of react-native-fast-image library
<Thumbnail source={product} />
</View>
)
return (
<View style={itemContainerStyle}>
// component from #UI-kitten components library
<Card
onPress={onPressItem}
header={renderItemHeader}
style={[styles.row, columnWrapperStyle]}
>
{/*Card Body*/}
<Text
category="c1"
appearance="hint"
ellipsizeMode="tail"
numberOfLines={1}
>
{product.category?.name}
</Text>
<Text category="c1" ellipsizeMode="tail" numberOfLines={2}>
{product.name}
</Text>
{getProductPrice}
</Card>
</View>
)
}
export default React.memo(ProductListItem)