SectionList: fix separators position when list is inverted

[Simek]

Summary:

Fixes:

• SectionList shows inconsistent SeparatorComponent behaviour when using inverted #53749

Before:

Android	iOS

If inverted prop is used, update section index calculation to return correct value in VirtualizedSectionList.

I have also altered the RNTester example styling slightly to make it easier to debug and test the issue (removed applied by default items margin).

Changelog:

[GENERAL] [FIXED] - SectionList: fix separators position when list is inverted

Test Plan:

Modify the RNTester "SectionList with separators" to include invert option. Make sure that Flow checks are passing, test the changes on real devices on both platforms.

I have also make sure that non-inverted lists are not affected by the changes.

Preview:

Android	iOS

[facebook-github-bot]

@philIip has imported this pull request. If you are a Meta employee, you can view this in D82792798.

[yungsters]

I've been trying to understand the bug and why this fixes it, and I see the screenshots in the test plan which looks right. But I'm having trouble reasoning about it.

In particular, I'm trying to understand why the inverted checks in ItemWithSeparator are insufficient:

https://github.com/facebook/react-native/blob/main/packages/virtualized-lists/Lists/VirtualizedSectionList.js#L632-L633

For reference, these checks were originally introduced by #26933 which seemingly sought to solve the same problem.

[Simek]

As I understand it, it looks like at some point the separators logic has been refactored to be based on the indexes, but the indexes were taken from info helper (_subExtractor), which basically maps to the user provided sections/data (and other props) which are passed to list component.

The inverted prop is display only, and info data remains unchanged no matter of prop value, which seems to re-introduced the issue, hence the idea to calculate display index and pass it everywhere where the info.index has been used, so the separators can be injected at right points.

But I might be wrong, if you have any other idea how to approach that issue please let me know, I'm happy to update the PR accordingly. 🙂

[react-native-bot]

This PR is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label.

[react-native-bot]

This PR is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label.

[react-native-bot]

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This PR was closed because it has been stalled for 7 days with no activity.