Add support for `SectionList` sticky headers about react-navigation-collapsible HOT 10 OPEN

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

from react-navigation-collapsible.

from react-navigation-collapsible.

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)

from react-navigation-collapsible.

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

from react-navigation-collapsible.

@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

from react-navigation-collapsible.

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

from react-navigation-collapsible.

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. :)

from react-navigation-collapsible.

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

from react-navigation-collapsible.

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

from react-navigation-collapsible.

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

from react-navigation-collapsible.