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

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:

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.

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

try stickySectionHeadersEnabled={false}

@yanisakli

@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.

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

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

@nastynaz

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

This hasn't been fixed yet.

issue react#18943 - SectionSeparatorComponent and ItemSeparatorCompon…

issue react#18943 - Fix test fail

issue #18943 - SectionSeparatorComponent and ItemSeparatorComponent s… (

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

I will check the latest pr and write back here :)

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

Navigation Menu

Repository navigation

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

Environment

Steps to Reproduce

Expected Behavior

Expected gif:

Actual Behavior

Problem Gif:

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Environment

Steps to Reproduce

Expected Behavior

Expected gif:

Actual Behavior

Problem Gif:

Activity

stale commented on Jul 18, 2018

terrysahaidak commented on Jul 18, 2018

yanisakli commented on Aug 8, 2018

terrysahaidak commented on Aug 8, 2018

earle commented on Sep 5, 2018

nastynaz commented on Nov 30, 2018

terrysahaidak commented on Nov 30, 2018

4 remaining items

terrysahaidak commented on Aug 2, 2019

stale commented on Oct 31, 2019

terrysahaidak commented on Oct 31, 2019

stale commented on Jan 30, 2020

stale commented on Feb 6, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions