[SectionList][inverted] SectionList headers are sticky-at-the-top-footers if the list is inverted
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
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 list headers should be in the top of the section instead of the bottom like section footers do with an inverted list (but they aren't sticky).
Expected gif:

Actual Behavior
The section headers are footers instead of headers. They are sticky because of https://github.com/facebook/react-native/pull/17762 but still footers, not headers.
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}
/>
)}
ItemSeparatorComponent={ItemSeparator}
/>
/>
</View>
);
}
}
Problem Gif:

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by cloning the linked React Native reproduction and running it with react-native run-ios to observe the inverted SectionList behavior. Inspect the SectionList entry point and existing inverted-list handling, then compare the result with the expected and problem GIFs; done means headers remain at the top of their sections rather than behaving as footers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100