Empty page on Android

[zjkuang]

Current behavior

Sometimes we got an empty page with FlashList. We used the Component Inspector to check the component hierarchy shown as below:

Expected behavior

It should show the contents provided by the data source.

To Reproduce

It is not reproducible every time, which makes it seem like a race condition.

Platform:

• [ ] Android

Environment

@shopify/flash-list 1.2.2

[naqvitalha]

FlashList does skip the first frame to measure itself. If you already have an estimate you can pass it through estimatedListSize prop and content will render immediately.

[VladyslavMartynov]

@naqvitalha I also start using FlashList and even with estimatedListSize I have blank screen and then after scrolling i have my listItems

[max-kim]

@naqvitalha Faced the same issue with blank content on iOS when I use the FlashList within the BottomSheet. Steps to reproduce:

Case 1:

• render FlashList with content inside the BottomSheet
• move the BottomSheet to the top position
• start scrolling in an arbitrary direction
• drag the BottomSheet handle while scroll momentum is going
• observe the blank content

Case 2:

• render FlashList with content inside the BottomSheet
• move the BottomSheet to the top position
• scroll list content to the end of the data
• move the BottomSheet to bottom
• make sure that the FlashList component isn't rerendered since the BottomSheet gets closed
• call flashListRef.scrollToOffset({ offset: 0, animated: true })
• observe the blank content

hope it may help you to figure out the nature of the issue

[gokul1099]

I am also facing same kind of issue in android. UI components passed to the renderItem is not rendered completely.

In some the list item the "Add To Cart" button is not showing, only white space is showing. when i try to add background colour for that button, still showing white space. When I scroll down in some of the item the button is present.