Question 11645 in Shopify Question posted in
The Shopify help center can be found here.

FlashList's rendered size is not usable – Shopify

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>
Tags:

2

Answers


  1. 0

    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 .

    Login or Signup to reply.
  2. 0

    If you place FlashList inside a View with justifyContent=center and alignItem=center, you should received this error. Try to remove it like this:

    <View style={{flex: 1}}>
    <FlashList data={must not empty} ... />
</View>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search