Scroll on header

[Unich-HieuDT]

I have set box-none (because there are still buttons inside) to allow scrolling from the header. The issue occurs when I place my finger on the button and try to scroll, it doesn’t work, but if I place my finger outside the button and scroll, it works fine. Is there any way to fix this?

Scroll.on.header.mp4

[Unich-HieuDT]

Hello @tiagocorreiaalmeida!
I see that you have previously opened a pull request regarding this issue. I wonder how we should modify it with the latest version? Could you please help me?

[Unich-HieuDT]

@andreialecu Hello. Any updates?

[yemyatthu-binlab]

hello is there any update for this issue? I have tried using pointer event box-none to the wrapper of header but it does not work, only pointer event none make the header scrollable, but just like u since i have many buttons, i am stuck in that problem for almost one week, may i know how do u use box-none to wrapper of header and may i know ur reanimated version and collapsible tab view version?

@andreialecu Hello. Any updates?

[gregavola]

I'd love to understand how to do this:

• Touchables in the header
• Scroll from the header

[DavitVosk]

I also tried to scroll from header when there is touchable in it, but it is not working

P.S. tried adding pointerEvents='box-none' to Header, but no success.

SOLUTION: seems we need to add pointerEvents='none' to all non touchable views in Header

[gregavola]

@DavitVosk Can clarify your solution a little more? You put pointerEvents='box-none' on the View conainer for your header, but then every View that isn't touchable, you put pointerEvents='none'? And for the touchables you don't have any pointerEvents?

[gregavola]

I tried solution that @DavitVosk mentioned

 const renderHeader = () => {
    if (!user) {
      return <></>;
    }

    return (
      <View pointerEvents="box-none">
        <RenderProfileHeader
          .....
        />
      </View>
    );
  };

Then in every View inside of RenderProfileHeader, that wasn't touchable I added <View pointerEvents="none">....</View> around it. For any Button or TouchableOpacity, I added pointerEvents="box-none" or pointerEvents="auto"

I was able to scroll the header, but nothing was tappable. Maybe I did this wrong?

[gregavola]

I think what @DavitVosk is talking about a different problem, scrolling in headers where you try to scroll from a touchable. The issue here is:

• Scroll from Header (anywhere in the header)
• Have touchable in the header still have the ability to be tapped

[DavitVosk]

Sorry for confusion. Yeap, my fix was about be able to scroll from header's non-touchable part... But scrolling with touchable part is not possible yet

[gregavola]

@DavitVosk Scrolling the header is accomplished by wrapping the header in <View pointerEvents="none">, but the none of the touchables work. <View pointerEvents="box-none"> also works, but also none of the touchables in the header can be tapped.

This is the biggest issue right now

[a-petrenko-muse]

Same issue(

[surethink]

the issue blocks me from migrating to the library:(

[itsnyx]

same issue here on android rn 79 any solution for this guys?