ItemSeparatorComponent only receives leadingItem

[davor-bauk-sh]

Summary

LegendList's ItemSeparatorComponent is typed and called with only leadingItem:

https://github.com/LegendApp/legend-list/blob/main/src/components/Separator.tsx

ItemSeparatorComponent?: React.ComponentType<{ leadingItem: ItemT }>;

That makes it impossible to style a separator based on the boundary it sits on, which is the common case for separators: a divider whose color or thickness depends on whether the two items around it belong to the same group.

Repro

<LegendList
    data={entries}
    renderItem={renderItem}
    // Only one side of the boundary is available, so this cannot be expressed.
    ItemSeparatorComponent={({ leadingItem }) => (
        <View style={leadingItem.group !== /* ??? */ ? styles.groupDivider : styles.hairline} />
    )}
/>

Workarounds all require duplicating the list's own indexing: capture data in a closure, look up the leading item's index via keyExtractor, and read data[index + 1] yourself. That is fragile with recycling and re-renders, and it does not update when only the next item changes.

Expected

The separator receives both sides, like SectionList separators already do in this repo (SectionListSeparatorProps in src/section-list/flattenSections.ts has leadingItem and trailingItem), and like VirtualizedSectionList in React Native:

ItemSeparatorComponent={({ leadingItem, trailingItem }) => (
    <View style={leadingItem.group !== trailingItem?.group ? styles.groupDivider : styles.hairline} />
)}

Note on correctness

Passing the next item through the container's existing item data is not sufficient. A container only re-renders when its own item changes, so editing item n + 1 in place would leave item n's separator showing stale styling. The trailing item needs to reach the separator through a path that updates independently of the leading item's container.