stickyHeader prevents touch events on foreground

[peacechen]

When both renderForeground and renderStickyHeader are supplied, touch events no longer register on the foreground header.

[alejandrochacinortega]

Did you find a solution to this? @peacechen ? I am running into the same problem

[renay007]

Same problem here

[bgoyal2222]

I am also facing the same problem.. only the stickyHeaderHeight area is not touchable.. else works fine.. I tried disabling by changing to stickyHeaderHeight={0}, Now touches are working... Had anyone found some hack or solution, please help..

[renay007]

Unfortunately, the hack I've been using requires you to change code in the node module. Fix #57 did the trick for me but no one merged the pull request. If you're changing the node module directly, make sure you keep track of where you made the change since all changes will go away if you delete all node modules and do a simple npm install

[bgoyal2222]

https://github.com/monterosalondon/react-native-parallax-scroll

i have found a alternative component check this..

[renay007]

Actually, I've looked at the current open issues and it seems that there are still problems when it comes to make the foreground touchable. Be careful and best of luck with the one you end up going with! :-)

[bgoyal2222]

isForegroundTouchable this property they have added to solve that issue

[renay007]

Awesome!!!

[artsx]

Hello, Has anyone found a solution with this module?

[flikQ]

@fungilation I forked your version of this library but this issue doesn't seem to be fixed, did I miss something? (I can't find a better way to comment to you than via the issue itself).

[fungilation]

I haven't touched this, I can't reproduce. I use both renderForeground and renderStickyHeader in my app and I don't have any touch event issues.

[peacechen]

@fungilation Do touch events register on the sticky header area? To test this, it needs to contain a touchable component listening for events.

What version of RN are you using? Maybe the behavior is different between RN releases.

[fungilation]

On RN 0.56. Yes I use a touchable on the entire renderStickyHeader to scroll a long FlatList back to the top. You can see this in my app WonderSwipe. Download the iOS app, search something, swipe left, scroll down on one of the summaries, tap sticky header on top.

[daleside710]

Add "stickHeaderheight" and add scrollEvent props like this: scrollEvent={event => { if ( event.nativeEvent.contentOffset.y <= 0 && this.state.stickHeaderHeight > 0 ) this.setState({ stickHeaderHeight: 0 }); else if ( event.nativeEvent.contentOffset.y > 0 && this.state.stickHeaderHeight === 0 ) this.setState({ stickHeaderHeight: 50 + statusBarHeight }); }} It works perffect for me. Good luck.

[jifromz09]

@daleside710 - Using your solution works fine but a Yellowbox warning is popping up with a warning message 'YellowBox.js:67 Property stickyHeaderHeight must be set if renderStickyHeader is used.'

[daimagine]

@daleside710 solution works fine for me. I wrapped it in a component like this

import React, {useState} from 'react';
import UIParallaxScrollView from 'react-native-parallax-scroll-view';

export const ParallaxScrollView = ({
  children,
  stickyHeaderHeight,
  ...restProps
}) => {
  const [altStickyHeaderHeight, setStickyHeaderHeight] = useState(1);
  const onScroll = event => {
    const threshold = 30;
    if (restProps.renderStickyHeader) {
      if (
        event.nativeEvent.contentOffset.y <= threshold &&
        altStickyHeaderHeight > 1
      ) {
        setStickyHeaderHeight(1);
      } else if (
        event.nativeEvent.contentOffset.y > threshold &&
        altStickyHeaderHeight === 1
      ) {
        setStickyHeaderHeight(stickyHeaderHeight);
      }
    }
  };
  return (
    <UIParallaxScrollView
      stickyHeaderHeight={altStickyHeaderHeight}
      scrollEvent={onScroll}
      {...restProps}>
      {children}
    </UIParallaxScrollView>
  );
};

hope it helps anyone trying to solve this