flash-list: [Warning] FlashList's rendered size is not usable.

Hi there, so I tried migrating from Flatlist, a but I keep getting a 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.

This is what my code looks like:

const FlashListView = ({ data }: IProps) => {
    const keyExtractor = (item: IBookmark) => item._id;
    return (
        <View style={{ flex: 1 }}>
            <FlashList
                data={data}
                estimatedItemSize={200}
                keyExtractor={keyExtractor}
                renderItem={({ item }) => (
                    <View style={{ height: 10, width: "100%" }}>
                          {item.name}
                    </View>
                )}
            />
        </View>
    );
};

I understand it’s simply a warning, but I’m curious if I’ve been missing something or doing something wrong, thanks.

The project is on Expo SDK 45 (dev-client) & react-native: 0.68.2.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 23

Most upvoted comments

Applying flexDirection: “row” in the View that contains the flashlist fixed it for me

<View style={{ flexGrow: 1, flexDirection: 'row' }}>
	<FlashList ... />
</View>

+14

sebastienlabine on Jan 10, 2023

For someone need:

estimatedItemSize={120}
estimatedListSize={{ height: 120, width: Dimensions.get("screen").width }}

+13

megabeehothanhminh on Jul 5, 2023

My problem was that I passed an empty array into data during the first render.

My primitive solution:

data && data.length > 0 && <FlashList ... />

RRaideRR on Jan 17, 2023

My FlashList was inside a ScrollView, so I added flexGrow: 1 to the it and it worked.

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    {/* children */}
    <Flashlist />
</ScrollView>

badalsaibo on Nov 18, 2023

I tried every solution mentioned in the replies but still getting the warning. any suggestion?

vikasis4 on Mar 12, 2024

It must be declared in the top view of the file to take effect

Kelier on Mar 21, 2024

You can monitor onLayout on the list and see when it’s raised as 0. Overall, this is expected if the list’s size is incorrect.

naqvitalha on Jul 5, 2022