New version, a few questions?

[emmx]

I'm testing the latest changes and so far everything work as expected, really nice job! A few questions here so I can further tweak this lib for my app.

1. Is there a workaround for the flickering bug in Android (reported in I have used cat demo. When I scroll slowly towards header i can see entire scroll view getting vibrated. Could you please tell me how to fix it #62)? Have you used this lib on production already with this bug? It's pretty annoying and it looks like it won't be fixed anytime soon by the RN team (the bug was reported back in 2017).

2. It would be nice to have a prop to disable the header opacity animation (ie, remove the opacity in line 89)

3. More importantly, why is the content below the header hidden immediately after you start scrolling? I expect it to remain visible until the header is fully collapsed/hidden or at least to have a prop to enable that. Any way to disable this? I'm trying to change this behavior myself but I'm not yet sure what changes are needed or what lines are really responsible for this.

[benevbright]

Hey, @emmx Thanks for the discussion.

1. I'm looking into it. please see below comment
2. good idea!
3. I'm sorry, I don't understand clearly. what is content and which sample example are you talking about?

[benevbright]

1. ScrollView sticky header flickers in the latest builds ( > RN 0.47.1 ) facebook/react-native#15445 (comment)

Here is a workaround and it works. I will write postinstall script for example.
But I don't know how I should change for Expo user. (Although I don't think you are using Expo)

[emmx]

I'm not using Expo so it probably works for me, thanks!

Regarding number 3, have a look at the two GIFs below. Pay attention to the "About" section on the first one, which is right below the tabs. See how it's not hidden until it goes beyond the screen? On the other hand this lib would hide it immediately as you start scrolling, check the second recording.

[benevbright]

Oh, now I got it. Thanks for the kind explanation. It's related to #64.

If you set safeBounceHeight as 0, it would work as you expected.
But the thing is that it's not happy with iOS's built-in bounce scroll and that's why I had to put safeBounceHeight there.

[emmx]

I just set safeBounceHeight = 0 in line 35 but it doesn't seem to alter how it works, in fact it looks exactly the same while scrolling. Any idea?

[benevbright]

Hm.. It should work...
I'm sorry. one more time.
Could you make sure your node_module folder is properly updated?

[emmx]

Yes, I thought that may be the case but nope, I'm logging its value right below that line and it's 0. Any other idea?

I'm testing it on a physical Android device by the way.

[benevbright]

Ok, I could reproduce it. It's actually not exactly the same as before, but I could see your problem on my side too.
I think velocity is different somehow between scrolling and collapsing.

But, I think it could be fixed easily because of iOS's bounce. We can't just forget about iOS. What do you think?

[emmx]

I'm not sure what the problem with iOS bounce is. Maybe we should force bounce=false as mentioned in #64? Don't know really, I haven't tested this on iOS yet.

Regarding this issue in particular, did you figure out what is causing the difference in velocity?

[emmx]

1. facebook/react-native#15445 (comment)

Here is a workaround and it works. I will write postinstall script for example.
But I don't know how I should change for Expo user. (Although I don't think you are using Expo)

I couldn't make it work. Did you change anything else apart from that IF statement? Other people below that answer comment that change didn't work for them either. Weird.

[benevbright]

That's too bad 😢 I really hope it works for you too. What version of RN? I tested with /example, which is using 0.57.8.
I only deleted
if (mOnScrollDispatchHelper.onScrollChanged(x, y)) { and }.

[emmx]

I'm certainly missing something...

I've deleted the whole file ReactScrollView.java and also I removed the build folder from android/app/. Then I run react-native run-android and it creates a new apk so I'm guessing it compiles everything again, however I see no error whatsoever and the scrolling is still buggy. Weird, it shouldn't be working.

[benevbright]

Hey, sorry @emmx
Unfortunately, you're right. I tested again and yes, it's not fixed...
I'm sorry about your time spending.
This should be fixed though.. It's not acceptable.

[emmx]

That patch may fix the issue but I couldn't test it correctly. Somehow editing the file and running run-android again doesn't cause react-native to recompile so we still see the bug, but actually the IF is still there.

I'm opening an issue on their repository to ask more about this, I'll report back here.

[benevbright]

facebook/react-native#21801 😭

[ganlanshu0211]

Sorry,but I find another demo https://github.com/austenLacy/react-native-collapsible-header-with-tabs-demo

[kartikpr]

@emmx I've followed you in pursuit of finding a solution to make a collapsible header like Instagram . Did you succeed in doing so?

[benevbright]

Let's continue in #72 about Instagram behavior.

[mpcen]

@benevbright has the lagging/stuttering issue been fixed yet with an animated header scrolled by a flatlist on Android?

[KingAmo]

@emmx could you please give some advice on how to implement the collapse header with tab like the gif you give ?