ListEmptyComponent can't use full height of view

[rKatex]

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",

[yaminyassin]

can you leave an expo snack code example of the problem?

[lachenmayer]

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.

[formaldehydeson]

Facing this issue as well, currently working around it by manually setting the height of my Empty component to a percentage of the screen height, not ideal.

[elpendor]

Having the same issue here.

Flex:1 on contentContainerStyle should fix it but it wont let me use it

[laogui]

Having the same issue.

[VictorioMolina]

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

[Ahmedhamed77]

the same issues here and using onLayout by view to measure height is so slow

[bonnmh]

Flashlist doesn't support this, they only support a few basic padding properties, I think with EmptyComponent you should set a fixed height

[junioroga]

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

exactly the same here

[JCYDigitalinnov]

I really needed this one. Please have it!!!!

[oikalyptus]

Same problem here. :-/

[yaminyassin]

Same problem here. :-/

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

[Eramirez06]

Do we have any solution for this?

if we use the Flatlist component from react Native is just add

contentContainerStyle={{ flexGrow: 1 }}

can we implement something similar?

[yachtwave]

need this please.

[Code-Victor]

I'm having the same problem

[nduyvu1511]

Any update?

[victorkvarghese]

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>
  );
};

[Code-Victor]

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 👍

[thtRajasthaniGuy]

same issue.

[VictorioMolina]

pls fix this lol

[bytebyte6]

same issue. i decided to wrap EmptyView with View.

import LottieView from "lottie-react-native";
import { Dimensions, View } from "react-native";
import { AppBarHeight, StatusBarHeight } from "./Global";

export default function EmptyView() {

  const {height, width} = Dimensions.get('window');

  return (
    <View
      style={{
        width: "100%",
        justifyContent: "center",
        height: height-AppBarHeight-StatusBarHeight,
      }}
    >
      <LottieView
        style={{
          alignSelf: "center",
          width: 200,
          height: 200,
        }}
        source={require("../assets/empty_box.json")}
        autoPlay
        loop
      />
    </View>
  );
}

[sam-houle1]

Anyone has a real solution for this problem ? ListEmptyComponent is unusable right now.

[chandu940]

Same Issue, I can't use another component if data is empty. I need ListHeaderComponent from it. Please fix it

[mattijsf]

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.

[isaachinman]

@naqvitalha Can we please get an official response on this?

It is an extremely common use case to want to center the ListEmptyComponent in the total possible size of the list view.

The way to achieve this with FlatList is flexGrow on contentContainerStyle. We either need a way to achieve 1:1 behaviour, or the docs should explicitly mention this issue, and that FlashList does not achieve parity in terms of styling.

[alainib]

i have same issue, but how to handle keyboard open or closed to center in remaining place ? this is a very common case

[AndreyBernardoni]

+1

same here, it require attention

[nduyvu1511]

If you just want to render an empty view fitted to the height (without scrolling), you can cheat by using scrollEnabled based on data like this:

<FlashList
      data={data}
      renderItem={renderItem}
      scrollEnabled={!!data?.length}
      ListEmptyComponent={() => <View style={{ height: Dimensions.get('window').height }}>{/* Your content */}</View>}
/>

[IronHeartDan]

+1

[ErionTp]

Then you will loose pull to refresh when list is empty :(.

The only way i managed to solve this is by using on layout. I created a hook:

import * as React from "react";
import type { LayoutChangeEvent } from "react-native";

export  function useLayout() {
  const [layout, setLayout] = React.useState<{
    x: number;
    y: number;
    height: number;
    width: number;
    measured: boolean;
  }>({ x: 0, y: 0, height: 0, width: 0, measured: false });

  const onLayout = React.useCallback(
    (e: LayoutChangeEvent) => {
      const { height, width, x, y } = e.nativeEvent.layout;

      if (height === layout.height && width === layout.width) {
        return;
      }

      setLayout({
        x,
        y,
        height,
        width,
        measured: true,
      });
    },
    [layout.height, layout.width],
  );

  return [layout, onLayout] as const;
}

Then in the component where i use the list:

const [{ height, measured }, onLayout] = useLayout();

const renderEmptyListComponent = useMemo(() => {
  if (!measured) return null;
  return (
    <View style={{ justifyContent: "center", backgroundColor: "red", height: height }}>
      <EmptyList message="Nothing found" />
    </View>
  );
}, [measured, height]);

  <View style={styles.root}>
    <FlashList
      {...restOfProps}
      onLayout={(e) => {
        if (!measured) {
          onLayout(e);
        }
      }}
      ListEmptyComponent={renderEmptyListComponent}
    />
  </View>

So this is a workaround, the re renders caused by onLayout are minimal, cause of the useLayout hook and this measured property.

Same problem here. :-/

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

[mateussatoh]

+1

[isaachinman]

Please refrain from "+1" comments. We all get notified. Just gives a thumbs up to the issue itself if you are affected.

[ameenaliu]

any updates here?

any working workaround?

[elgunhuseynli]

still waiting for a solution in 2025 😕

[Code-Victor]

I have given up on 'em. Hopefully, Legend list reaches v1 soon.

I'm still very grateful for the library though

[sebastienlabine]

Kind of crazy that one of the most basic / requested feature if still not implement without any activity from the shopify team whatsoever.

@rKatex any plans for 2025?