invertedStickyHeaders not working on iOS as of 0.54.2

[dannycochran]

• 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.3
Node: 8.9.4
Yarn: 1.5.1
npm: 5.6.0
Watchman: Not Found
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: ^16.3.0-alpha.1 => 16.3.0-alpha.2
react-native: 0.54.2 => 0.54.2

Steps to Reproduce

Create a section list and set invertStickyHeaders=true. See:

git clone https://github.com/dannycochran/invertedStickyHeadersBug
cd invertedStickyHeadersBug
yarn install && react-native start-ios
react-native start-android

Expected Behavior

Sticky headers render at the bottom of the screen and stick to the bottom when scrolling.

Actual Behavior

Sticky headers continue to render at the top, and do not stick to the bottom. They also seem to
screw up rendering of the list in general with empty components where there should be headers:

This appears to be a regression in 0.54.2 (it did not exist in 0.52.0). Also, the sticky headers were
always behaving as I expected in 0.52.0. I have an inverted sectionList and the headers were stuck
to the bottom and worked fine.

Edit: I originally reported this as iOS only. It is happening on both iOS and Android.

[dannycochran]

@janicduplessis who implemented invertStickyHeaders

[janicduplessis]

We changed this behaviour recently (sorry if it wasn't properly documented), now sticky headers will always stick at the top of the list even when inverted. You can restore the previous behaviour by using invertStickyHeaders={false} on ScrollView. There isn't currently a prop on SectionList to set it but you can use renderScrollComponent={(props) => <ScrollView {...props} invertStickyHeader={false} />. Maybe it would be worth adding a better way to configure it (https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizedList.js#L896).

cc @sahrens

[janicduplessis]

Also the name invertStickyHeaders is a bit misleading here, what this prop does is render the headers at the bottom of the ScrollView instead of at the top but since the list is inverted it will appear at the top again. In your case you want invertStickyHeaders to be false since it will cause the sticky headers to appear at the bottom when inverted.

[sahrens]

Most all props should just get forwarded through to the underlying ScrollView, no?

[dannycochran]

@sahrens no, for some reason it reads "this.props.inverted" instead of the actual prop when passing props to the ScrollView:

react-native/Libraries/Lists/VirtualizedList.js

Line 896 in 0d924dd

invertStickyHeaders: this.props.inverted,

@janicduplessis, is there anything else to propagating invertStickyHeaders besides changing the line above?

[janicduplessis]

No this should be the only change needed