List not rendering items after initial data array is empty

[freddy-eturi]

How to reproduce:

1. Have an empty data set. Use EmptyListComponent

• EmptyListComponent will render correctly.

2. Add an item to the data set without destroying the FlashList i.e via state change.

• EmptyListComponent will disappear, but new item is not rendered.

However if the data set is not empty on initialization then everything works as expected.

So if the data array has an item it will render the item. If the item is removed then EmptyListComponent is rendered as expected.
Then If a new item is added then it will also render as expected.

This leads me to believe that there is an issue that occurs when initializing a FlashList with an empty data set.

Might be related to: #757 however I wasn't using a horizontal list

[naqvitalha]

Can you provide an expo snack which reproduces this issue? It'll help with debugging this quickly.

[fortmarek]

Can you also post FlashList version you are using?

[freddy-eturi]

I'll try to create an expo as soon as I can.

I am using 1.4.0

[wahidshadab]

This is happening to me as well,
I am using 1.5.0
@naqvitalha @fortmarek The issue for me is with the prop estimatedListSize. When I remove the estimatedListSize it works fine.
The estimatedListSize prop on my code looks like

estimatedListSize={{
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
      }}

[ItsFlash10]

This is happening to me as well, I am using 1.5.0 @naqvitalha @fortmarek The issue for me is with the prop estimatedListSize. When I remove the estimatedListSize it works fine. The estimatedListSize prop on my code looks like

estimatedListSize={{
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
      }}

You're correct; I'm facing the same issue, but removing it renders a white screen for a second after the data is fetched from the API. Please lemme know if you find a solution that can handle both cases.
PS: Using estimatedListSize conditionally for the time being.

[shadabwahidullah]

@ItsFlash10 No unfortunately I did not find any solution, instead I opted to show a loader while the data is being fetched from the API.

[ItsFlash10]

@ItsFlash10 No unfortunately I did not find any solution, instead I opted to show a loader while the data is being fetched from the API.

@shadabwahidullah It worked for me and also adding a loader didn't help in my case as the issue is after the data is being populated, so the blank screen appears after the data is fetched from the API.

[zRelux]

Same issues using estimatedListSize

[baesumin]

+1

[humaidk2]

Still facing this
"@shopify/flash-list": "1.5.0",
"react-native": "0.72.5"

this hack does fix it, but its a hack

if (data.length === 0) {
  return renderEmpty();
}

[linxianxi]

same here

[PankajPunia]

Facing the same issue, if i provide estimatedListSize, flashlist does not render the items and i see blank screen. Happening on android only

[salim-m]

+1

[VadymVashchuk]

Just faced same issue. I was sure that I have tested in my chat app such case when user send message to the empty chat. And I was sure that everything works fine. And today new messages are ignored... I forgot that I've recently added this prop - estimatedListSize to my FlashLIst component and broke this case with this prop:D Always fun to work with libraries in RN! When you fix an issue you immediately get another one to fix:D

For now I think this solution works fine:

          const { height, width } = useWindowDimensions();

          estimatedListSize={!data.length ? null : {
          height: height,
          width: width,
        }}