[FEAT]: Support overrideItemLayout

[stevengoldberg]

LegendList should support the overrideItemLayout prop supported by FlashList. This is needed in multi-column lists that have some items spanning different numbers of columns. For example, a calendar has 7 columns: the day cells span a single column, while the month header cells span all seven.

This was discussed pre-1.0, but I think it slipped through the cracks.

[jmeistrich]

Yes, it very much slipped through the cracks 😅. It was very hard to solve in 1.0 - I had a branch that implemented it but ran into some tough problems. As of 2.0 it should be more easily doable, but I haven't had a chance to get back to it. I'll try to get to it soon!

[jmeistrich]

I added this in 3.0.0-beta.29. Can you give it a try and see if it works well for you?

[stevengoldberg]

I just spent a little time testing it — the good news is that it renders correctly, and looks visually identical to the FlashList version. The only code changes I made were swapping FlashList for LegendList and adding recycleItems={true}.

However, I'm experiencing some bugs with it, and I unfortunately don't know if they're related to this change. I'm happy to open another issue for this if you like.

1. Tracking scroll offset: My entire list is wrapped in a single GestureHandler. The list gets passed a handleScroll function which keeps track of the current contentOffset:

scrollOffset.value = nativeEvent.contentOffset.y

Then the Tap and Pan gesture handlers use the touch coordinates, the scroll offset, and a precomputed map of cell positions to determine which (if any) cell is being touched.

This works as intended with FlashList. With LegendList, it works correctly when the app first loads. However, once I switch albums (replacing all the data in the list), nativeEvent.contentOffset.y will no longer be correct, so my gesture handlers don't function correctly. If I fully reload the app, it will work correctly again after reloading.

2. Incorrect initial scroll offset: This seems like it could be related. My list should always be scrolled all the way to the bottom when it loads. I pass initialScrollOffset={data.length - 1}. However, with FlashList this always resulted in the list starting out scrolled not quite to the bottom, so as a workaround I added this:

onLoad={() => {
  if (calendarData.length > 0) {
    listRef.current?.scrollToIndex({
      index: calendarData.length - 1,
      animated: false,
    })
  }
}}

This works as intended with FlashList — the list will be scrolled to the bottom on app load and when switching albums.

However, it doesn't quite work with LegendList. When the app first loads, the list is scrolled almost but not quite to the bottom. Then when I change albums, it will be scrolled somewhere in the middle rather than the bottom.

Let me know if I can provide any more detail about this.