Reduce scroll amount to quickly collapse extra header

[paolospag]

Hello,
first of all, @benevbright congratulations for the great work done so far!

My issue is not about problem or bug, but it is a possible enhancement.

I want to reduce the scroll amount and then reduce the time I wait for collapse extra header.
I tried to find a way to achieve this looking at the file index.js and I found this at line 35:

const safeBounceHeight = Platform.select({ios: 300, android: 100, web: 200});

For example, if I set safeBounceHeight = 0 I get the desired result, also because in my AnimatedFlatList I put bounces={false}.

Suggestion

It could be an idea to have a param to set up in collapsibleParams for a custom safeBounceHeight value or any other param that help to reduce scroll amount and quickly collapse custom extra header.

[benevbright]

Hi, @paolospag

Thanks for your suggestion.
The things you found is absolutely correct. It's all about bounces on iOS.
And It's a good idea :)
I can update it or you could create PR.

[paolospag]

Hi @benevbright,
Thank you for your response.

I think it's better that you do it because you know your module and you know what's right to do ;)

[paolospag]

Hi @benevbright,
Great, I've seen you push my request in master.

But I still have a couple of things to ask you.

First, how can I use/set custom safeBounceHeight?

However, I have not yet solved my problem.
In my case, I use three tabs with AnimatedFlatList; two of these have so much content to scroll, but not the third.
I think it would be good to have an option in which to say that if the scroll exceeds a certain threshold, then automatically complete the header collapsing.
Do you think it's possible?

You can reproduce my situation setting data loop cycle to 15 in yours example.

[benevbright]

You can use it like this at App start.

import { setSafeBounceHeight } from 'react-navigation-collapsible';
setSafeBounceHeight(0);

I got that you have multiple Flatlist that has different length of content.
But why it's problem? I don't get that.

And it will be tricky though that we make it have each threshold.

[paolospag]

Sorry, I probably did not explain it well.

With short FlatList happens that the extra header does not completely collapse when scroll down.

In my case, extra header has height: 175

I can try to reproduce this in a Snack if necessary.

[benevbright]

Ok, I got that now.
Could you add some padding for short tab as a workaround?

[paolospag]

Oh, sure, but I think it isn't best solution.
It's annoying to have padding because it forces users to continue to scroll down.

In my opinion, if the header automatically collapses after a certain amount of scroll avoid users to force scroll down even if FlatList scroll height is minor that device height and I think scrollbar would disappear, while with the padding it would remain.

[paolospag]

Probably I can achieve this provinding custom method into onScroll property in FlatList and manipulatig animatedY, but I don't know how.

[paolospag]

Hi @benevbright ,
about extra header auto-collapsing, I looked for a similar scenario in other apps that could explain what I want to achieve and I found an interesting example in "Shpock" app (see the GIF below):

Sorry for the bad quality of the GIF.
In this example, there is also an animation to the header title, but this doesn't interest me.
Pay particular attention to the extra header and how it is animated when the touch is released.

Do you think it could be possible to do that?

[benevbright]

Hi, @paolospag
Sorry that I haven't been able to look at this issue nowadays.

And the thing you mentioned is the same as this one. #16
I want to that too but I have not found a good solution yet.

[paolospag]

Hi @benevbright ,
I think I have some news about that, try to take a look at #16

[KingAmo]

@paolospag could you please give an example of how could i use collapse header with tabs ? just like the gif above