contentContainerStyle flexGrow: 1 to allow center ListEmptyComponent

[tomasmozeris]

Problem
I have ListEmptyComponent component, which uses style flex: 1, justifyContent: 'center' to place it inside center of users viewport.
https://snack.expo.dev/7MSfUAke7

My workaround
To allow empty list container take remaining space I had to patch flash-list and recyclerlistview with flexGrow: 1 in these places:
https://github.com/Shopify/flash-list/blob/main/src/FlashList.tsx#L327
https://github.com/Flipkart/recyclerlistview/blob/master/src/platform/reactnative/scrollcomponent/ScrollComponent.tsx#L86

As default <Flatlist /> allows contentContainerStyle={{ flexGrow: 1 }} and solves such problem, consider to support flexGrow in contentContainerStyle of Flashlist

[Poheart]

Would like to bump this as it deserve more attention.

i have the same use case with yours on ListEmptyComponent, and need to apply flexGrow to fill the available space on screen.

[ser-emejia]

Please, also add the

columnWrapperStyle prop

When we have two or more columns in our layout

[Navipro70]

I think issue is more efficient to point the problem, unfortunately

[ansh]

This is a big issue that should be fixed!

[Bayramito]

i think you could use CellRendererComponent for that

[chj-damon]

I just encountered the same problem. I want to center my ListEmptyComponent

[ser-emejia]

Hello, this solution works for me:

const [height, setHeight] = useState<number>(0);

<View
    style={{ flex:1 }}
    onLayout={(event) => setHeight(event.nativeEvent.layout.height)}>
    <FlashList
        ...
        ListEmptyComponent={
            <View
                style={{
                    height,
                    alignItems: 'center',
                    justifyContent: 'center' 
                }}>
                <Text>Text Center</Text>
            </View>
        }
    />
</View>

Hope it helps!

[chj-damon]

yes it works. but it feels not natural.

[NikhilMasurkar]

how can we add custom styling in this contentContainerStyle?
like this
contentContainerStyle={[ styles.containerStyle, customContainerStyle, ]}

[LukyLurks]

Thanks for this. Just a few notes from trying it:

• it's a bit messier if you use a HeaderComponent: its height will be included in event.nativeEvent.layout.height, and your ListEmptyComponent will end up being taller than desired. I didn't thoroughly test it but one can probably work around this by applying the same technique to the header to get its height, then subtract that from the total height. For instance:

const [totalHeight, setTotalHeight] = useState<number>(0);
const [headerHeight, setHeaderHeight] = useState<number>(0);

<View
    style={{ flex:1 }}
    onLayout={(event) => setTotalHeight(event.nativeEvent.layout.height)}>
    <FlashList
        /*...*/
        HeaderComponent={() => (
            <View onLayout={(event) => setHeaderHeight(event.nativeEvent.layout.height)}>
                <MyHeaderComponent />
            </View>
        )}
        ListEmptyComponent={
            <View
                style={{
                    height: totalHeight - headerHeight,
                    ...styleThatCentersMyEmptyComponent
                }}>
                <MyEmptyComponent />
            </View>
        }
    />
</View>

I couldn't use that because my header has a "Read More" component in it that changes its height, and this workaround causes it to malfunction.

If your header component has a known constant height it can work, but then you can also just subtract that known height from the total height, without getting it through onLayout.

• Surely people thought about it but I haven't seen it mentioned. Another workaround, if applicable, could be a simple condition. For instance:

return !data || data.length === 0 ? (
    <View style={styleThatCentersMyEmptyComponent}>
        <MyEmptyComponent />
    </View>
) : (
    <FlashList
	/* your usual props */
    />
)

[zacdemi]

I also need flexGrow on contentContainerStyle property render items from the top of an inverted Flashlist.

[jcalem]

+1 I also need this added

[baesumin]

+1

[chj-damon]

@naqvitalha does this worth to take a look?

[andreialecu]

We recently merged Flashlist support to react-native-collapsible-tab-view and ran into a similar isssue:
PedroBern/react-native-collapsible-tab-view#335

We were using minHeight previously, but I think flexGrow would also work.

[VictorioMolina]

any updates on this?

[nazmeln]

any updates on this one? 🙂

[usmansbk]

damn! not fixed

[hadnet]

F**, I'm facing this issue and the @tomasmozeris does not work anymore in v1.5.

[versten1uk]

What a complex bug to fix, this may be a blocker to migrate from FlatList to FlashList

[sergey-king]

Any updates on this?

[Saschamz]

+1

[ameer2468]

+1

A workaround for now is just to conditionally render.

[flodlc]

Hope it will be supported soon

[amjadbouhouch]

+1

[szarbartosz]

addressed in #1206

[Samide47]

same problem using FlashList 1.5.0

[angelopedroso]

For those that use nativewind, just add "my-auto" on "contentContainerClassName":

contentContainerClassName="my-auto"

or create a CSS class:

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

and add on contentContainerClassName

[tomisykora]

I was able to overcome this by adding minHeight: 100% to ListEmptyComponent's style prop and by adding the following to FlashList props:

overrideProps={{
    contentContainerStyle: { flexGrow: 1 }
}}

I'm using FlashList v1.7.2.

[tiempham]

Thank Guy!

[hanwenbo]

 overrideProps={{
      contentContainerStyle: { flexGrow: 1,backgroundColor:"green" }
}}

ListEmptyComponent height = 100%

[devlasbe]

update please