List items don't render when listData changes #77
Comments
|
Hmm, not sure what that could be... We'll try making some examples with filtering like that and see if we can find a way to reproduce that. @michbil have you seen anything like this while testing your data changes? |
|
I can only suspect that when amount of items is drastically decreased, we can be stuck at the middle of the list(scroll position not updated), and that's why it seems that there are no elements. Tried to add to the example/app/(tabs)card.tsx if you don't scroll, everything looks fine, if you scroll list down, you will get this and there is no way to recover from this state.
|
|
Thanks for looking into this. I'll try and create a proper minimal repro soon. I just did some more testing and I'm seeing inconsistent results, but I still can't quite pin down the logic behind it. In the capture below, you can see I initially have 99 results. When I apply a filter ("test") that returns 9 results, they render correctly, but the top padding of the list is wrong. When I remove the filter it re-renders as expected. Next, I apply a different filter ("filtered") that returns 5 results, and it works as expected. Last, I apply a filter ("foo") that returns 20 results. This time nothing renders. Then when I remove the filter, the list doesn't correctly re-render until I scroll.
|
|
Ok, I was able to get a little more specific with the behavior. Previously, I was using |
|
@stevengoldberg Thanks, that agrees with my observations, I will try take a look tonight, if somebody wouldn't fix if faster :) |
|
@michbil Great! I'm catching up on my day job for a bit so I'm wouldn't be able to get to it for a couple days. |
|
Preliminary investigation showed that we don't reset container positions upon data change, which causes old invalid container positions being used. UPD: just resetting positions degrades "Mutable elements" example very much, we need something more smarter. |
|
I believe resetting positions would trigger a render of all containers, followed by another render when their positions are set again. So that's probably not a good way to go 😅 Maybe we can set a flag for calculateItemsInView to force it to set positions on everything? But I'm not sure what the actual problem is so I'm just throwing that out... @michbil Let me know if I can help with any ideas, otherwise I'll leave this to you 😀 |
I have a list of images that's filterable on the client side. It initially loads correctly and displays all items. When I set the filter, the data array changes and my list component renders with the updated data array length. However, no list items are visible.
I put console.log statements in the list component and in the item components. This is what I see when I set the filter to a tag string that returns 60 items:
But nothing is displayed in the list:
When I reset the filter and render all the items again, I see these logs:
And the list renders as expected again:
Not sure what code to include as my components are complex, but I tried pulling things out one by one and couldn't find any props that made a difference. When I use FlashList the filtering works as expected.
The text was updated successfully, but these errors were encountered: