I am migrating from FlatList
to FlashList
, i have upgraded my expo sdk from 45.0.0
to 46.0.0
and on implementing the FlashList
as in the shopify/flashlist documentation i get the following warning
FlashList's rendered size is not usable. Either the height or width is too small (<2px). Please make sure that the parent view of the list has a valid size. FlashList will match the size of the parent.
It was working fine with FlatList
, only that it took to much time to load data from api,,,thats why i decided to switch to FlashList
. Anyone know how to fix this?Any help is appreciated. here is my code
renderItem function
const renderItem = ({ item: product }) => {
return (
<Product
category={product.bp_product_category}
itemname={product.bp_product_name}
price={product.bp_product_selling_price}
mass={product.bp_product_mass}
unitofmass={product.bp_product_unit_of_mass}
productID={product._id}
/>
);
};
const keyExtractor = useCallback((item) => item._id, []);
const filteredproducts = products.filter((product, i) =>
product.bp_product_name.toLowerCase().includes(search.toLowerCase())
);
FlashList it self
<View style={{flex:1, width:'100%', height:'100%'}} >
<FlashList
keyExtractor={keyExtractor}
data={filteredproducts}
renderItem={renderItem}
estimatedItemSize={200}
numColumns={2}
refreshing={refresh}
onRefresh={Refresh}
contentContainerStyle={{
// alignSelf: "flex-start",
// justifyContent: "space-between",
// paddingBottom: 120,
}}
/>
</View>
I had the same issue and a warning FlashList rendered size is not useable
and the screen was blank .
According to FlashList docs we should use it inside a wrapper like View
with hardcoded height style number like this :
<View style={{ height: 200, width: Dimensions.get("screen").width }}>
<FlashList
data={DATA}
renderItem={({ item }) => <Text>{item.title}</Text>}
estimatedItemSize={200}
/>
</View>
If I was in your shoes I would make a simple flashlist work perfectly fine then I'd implement the list I want and add more to it .
This fixed my problem . Hope you make it work .