flash-list: ListEmptyComponent can't use full height of view

Current behavior

I need to render a ListEmptyComponent which uses the full height of the current view. To make this work with react natives FlatList I can apply a contentContainerStyle with flex: 1. Sadly this won’t work with the FlashList as it doesn’t allow flex in a contentContainerStyle.

Why is flex not allowed for for contentContainerStyle?
Is there another way, to make it work with FlashList, without the usage of contentContainerStyle?

Expected behavior

There should be the possibility to render ListEmptyComponent with flex: 1 / height: "100%"

To Reproduce

Use any ListFooterComponent and try to fill the whole view with it.

Platform:

iOS
Android

Environment

"@shopify/flash-list": "1.4.3"
"react-native": "0.71.7",

About this issue

Original URL
State: open
Created a year ago
Reactions: 36
Comments: 26

Most upvoted comments

Hi, we’re facing exactly the same issue. Snack: https://snack.expo.dev/@picnic-harry/flashlist-listemptycomponent-flex-repro

There are existing props for ListHeaderComponentStyle and ListFooterComponentStyle. If you don’t plan on supporting arbitrary contentContainerStyle, then a corresponding ListEmptyComponentStyle prop would fix this problem.

+13

lachenmayer on Jun 9, 2023

need this please.

yachtwave on Oct 19, 2023

Same Issue Work around for now. Used scrollview to mimic list empty component with pull to refresh (Refresh Control).

 if (data.length === 0) {
    return (
      <EmptyView
        isFetching={isFetching}
        isLoading={isLoading}
        refetch={refetch}
      />
    );
  }
else{
return <FlashList/>

EmptyView.tsx


const EmptyView = (emptyProps: IEmptyViewProps) => {
  const { isLoading, isFetching, refetch } = emptyProps;
  return (
    <ScrollView
      contentContainerStyle={{flexGrow: 1}}
      style={styles.scrollView}
      refreshControl={
        <RefreshControl
          refreshing={isLoading || isFetching}
          onRefresh={refetch}
        />
      }>
      <View style={styles.loader}>
        <Text>
          Empty View Message
        </Text>
      </View>
    </ScrollView>
  );
};

This works perfectly! I can’t imagine why it skipped my mind. Thanks 👍

Code-Victor on Nov 12, 2023

Same Issue Work around for now. Used scrollview to mimic list empty component with pull to refresh (Refresh Control).

 if (data.length === 0) {
    return (
      <EmptyView
        isFetching={isFetching}
        isLoading={isLoading}
        refetch={refetch}
      />
    );
  }
else{
return <FlashList/>

EmptyView.tsx


const EmptyView = (emptyProps: IEmptyViewProps) => {
  const { isLoading, isFetching, refetch } = emptyProps;
  return (
    <ScrollView
      contentContainerStyle={{flexGrow: 1}}
      style={styles.scrollView}
      refreshControl={
        <RefreshControl
          refreshing={isLoading || isFetching}
          onRefresh={refetch}
        />
      }>
      <View style={styles.loader}>
        <Text>
          Empty View Message
        </Text>
      </View>
    </ScrollView>
  );
};

victorkvarghese on Nov 11, 2023

Same problem here. 😕

have you tried checking if you list data is empty then displaying the empty component manually?

yaminyassin on Sep 21, 2023

Similar problem here. I need to center the ListEmptyComponent. Before migrating to FlashList contentContainerStyle={{ flexGrow: 1 }} fixed the issue.

VictorioMolina on Jun 14, 2023

It is a common use-case to allow the empty content to be centered I guess. Currently I’m re-using the estimatedListSize but it’s not alway’s perfectly centered of course.

mattijsf on Apr 10, 2024