[SectionList][inverted] SectionSeparatorComponent displays in wrong places with inverted list

[terrysahaidak]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Environment

Environment:
OS: macOS High Sierra 10.13.1
Node: 8.6.0
Yarn: 1.5.1
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.0.1 Build version 9A1004
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.3 => 0.55.3

Steps to Reproduce

Clone this repository and run it via react-native run-ios.
Observe the section separators are in wrong (randomly?) places.

Expected Behavior

The section separators should be right after the sections and section headers (like the non-inverted section list does).

I've used the same code as below but without inverted prop.

Expected gif:

Actual Behavior

The section separator components are in wrong places in the list if the list is inverted. For a non-inverted list, it works as expected.

Sample code:

export default class App extends React.Component {
  render() {
    return (
      <View style={s.container}>
        <SectionList
          inverted
          sections={mock.sections}
          maxToRenderPerBatch={10}
          initialNumToRender={10}
          style={{ flex: 1 }}
          keyExtractor={(item) => item.messageId}
          renderSectionHeader={sectionProps => (
            <SectionHeader
              {...sectionProps}
            />
          )}
          renderItem={({ item }) => (
            <ListItem
              item={item}
            />
          )}
          SectionSeparatorComponent={Separator}
          ItemSeparatorComponent={ItemSeparator}
        />
        />
      </View>
    );
  }
}

const Separator = ({ big }) => (
  <View style={[s.separatorContainer, big && s.separatorBig]} />
);

const s = StyleSheet.create({
  container: {
    marginTop: 24,
    flex: 1,
    backgroundColor: 'white',
  },
  sectionContainer: {
    // height: 16,
    marginTop: 8,
    marginBottom: 16,
    backgroundColor: '#b4c5ff',
    borderRadius: 16,
    alignSelf: 'center',
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  separatorContainer: {
    height: 8,
    backgroundColor: 'gray',
    borderBottomWidth: 1,
    borderTopWidth: 1,
    borderBottomColor: 'blue',
    borderTopColor: 'blue',
  },
});

Problem Gif:

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[terrysahaidak]

Unfortunately, the issue still exists in the latest react native 56, so please don't close:

[yanisakli]

try stickySectionHeadersEnabled={false}

[terrysahaidak]

@yanisakli Just tried it out with stickySectionHeaderEnabled={false}.
Nothing has changed.
The issue is about gray with blue borders blocks. Here how it should be (it works well without inverted prop):

And here is with inverted.

[earle]

To clarify the issue here: The section headers need to render before the section items when the SectionList is inverted -- currently when the SectionList is reversed the section headers are placed after each section

[nastynaz]

Any updates on this? I'm still getting this issue on the latest version of react native.

[terrysahaidak]

@nastynaz I did implement my own section-list using flatlist and conditional rendering of the current item, poor performance but at least it works.