FlashList's rendered size is not usable

Question

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>

Answer 1

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 .

Answer 2

From the docs:

...So, make sure that the parent of the list mounts with a valid size (>=2px) and FlashList will match the size of its parent. ...

So, I decided to wrap the FlashList into a View and set minHeight property to 2, which satisfies the statement from the docs.

<View style={{minHeight: 2}}>
    <FlashList ... /> 
</View>

As a result, the warning went away.