Repository navigation
[SectionList][inverted] SectionSeparatorComponent displays in wrong places with inverted list #18943
Description
- 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:
Activity
stale commentedon Jul 18, 2018
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 commentedon Jul 18, 2018
Unfortunately, the issue still exists in the latest react native 56, so please don't close:
yanisakli commentedon Aug 8, 2018
try
stickySectionHeadersEnabled={false}terrysahaidak commentedon Aug 8, 2018
@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
invertedprop):And here is with inverted.
earle commentedon Sep 5, 2018
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 commentedon Nov 30, 2018
Any updates on this? I'm still getting this issue on the latest version of react native.
terrysahaidak commentedon Nov 30, 2018
@nastynaz I did implement my own section-list using flatlist and conditional rendering of the current item, poor performance but at least it works.
4 remaining items
terrysahaidak commentedon Aug 2, 2019
This hasn't been fixed yet.
issue react#18943 - SectionSeparatorComponent and ItemSeparatorCompon…
issue react#18943 - SectionSeparatorComponent and ItemSeparatorCompon…
issue react#18943 - Fix test fail
issue #18943 - SectionSeparatorComponent and ItemSeparatorComponent s… (
stale commentedon Oct 31, 2019
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.
terrysahaidak commentedon Oct 31, 2019
I will check the latest pr and write back here :)
stale commentedon Jan 30, 2020
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.
stale commentedon Feb 6, 2020
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.