Add support for `SectionList` sticky headers

[rcidt]

I am using this in a MaterialTopTabNavigator with a SectionList. The SectionList sticky headers do not seem to stick. It looks like they might actually be sticking, but are hidden from view underneath the tabs.

[rcidt]

[benevbright]

Hi, @rcidt
I really appreciate your issue and GIF.
Please let me understand clearly. Did you expect to the tab be hidden too?

If so, showing tab is the way I built this module. (and it's also the way many major apps do)

[benevbright]

Oh, you have bottom tab too.
It would be great if the module would be able to hide it as well. #28

[rcidt]

@benevbright This is working just as I expected. I expect the tabs to stay visible at all times, but the Titled Header to be hidden from view as I scroll down.

The only thing that is not working as expected is the "sticky headers". This is a SectionList, so the each "sticky header" should stick to the top of the scrollable area.

In my Gif, if you look carefully you will see two rows, with the following title "Seen" and "Replied". Those are the sticky headers.

---

I have played around with collapsible source code a bit, maybe it will clarify:

index.js line 20:

const defaultHeaderHeight = Platform.select({ios: 44, android: 56, web: 50});
const defaultTabHeight = 50;
-const safeBounceHeight = Platform.select({ios: 300, android: 100, web: 200});
+const safeBounceHeight = Platform.select({ios: 70, android: 100, web: 200});

index.js line 333:

return (
-       <View style={{flex: 1}}>
+       <View style={{marginTop: 70, flex: 1}}>
         <SafeAreaView style={{flex: 1}} forceInset={{bottom: 'never'}}>

And here is the result:

Notice how in the above Gif, the sticky headers do eventually stick to the top scroll area. But as you can see there are a few issues with this.

Hopefully you can shine some light on how to achieve this.

Thanks you for your time

[benevbright]

Oh, I got it now.
Thanks again for your explanation.
I'll look into it!

[benevbright]

Hi, I tried to resolve this issue but I don't think I could resolve it easily.
Yes, I was able to reproduce the same behavior.
And as you point out, it's relative with safeBounceHeight.
safeBounceHeight is necessary to prevent the side effect of this module.
I will update you if I find a solution. :)

[rcidt]

@benevbright Thanks for looking into this, yes please let me know. I will also give it some thought as well.

[benevbright]

https://github.com/benevbright/react-navigation-collapsible/tree/bug/sectionlist
I created bug/sectionlist branch reproducing bug with SectionList.

[radetsky]

@rcidt How did you make floating button fixed? I tried to use position absolute, but the screen height is floating too when headers collapsing.

[rcidt]

@radetsky it is rendered higher up in the component tree. Outside of the list.