Detect press in Foreground impossible...

[obykoo]

I need to place icon back at the top of parallax. So I do this with absolute position , but however then there is no onPress event. If I move icon out of renderForeground , then I can detect onPress , but I can not hide it when only sticky header is visible.....

[obykoo]

What I mean , there is no way to detect click on Foreground in upper left corner even with z-index. It simply does not work.

[luisfuertes]

+1

[hwnprsd]

That is because your StickyHeader component is on there with a 0 opacity and outside the view. When you scroll up, it slides in animating the opacity. So, if anything should be touchable, it should have a margin equal to the stickyHeaderHeight prop's value

[luisfuertes]

@d3fkon i had this code and when Header is expanded, top buttons cant be touchable. Dont understand where i have to put the top margin.

  renderExpandedHeader() {
    return (
      <View style={{ height: parallaxHeaderHeight, flex: 1 }}>
        
        <View style={{flexDirection: 'row',  justifyContent: "space-between", padding: 10, paddingTop: 20}}>
          
          <TouchableOpacity onPress={ () => Actions.pop() } style={{ backgroundColor: 'rgba(0,0,0,0.4)', padding: 10, borderRadius: 20}}>
            <Text style={{color: 'white', fontWeight: '600'}}>Back</Text>
          </TouchableOpacity>

          <TouchableOpacity style={{ backgroundColor: 'rgba(0,0,0,0.4)', padding: 10, borderRadius: 20}}>
            <Text style={{color: 'white', fontWeight: '600'}}>Compartir</Text>
          </TouchableOpacity>

        </View>

        <View style={{ flexDirection: 'row', alignItems: 'flex-end', flex: 1, justifyContent: "space-between", padding: 10 }}>
          <TouchableOpacity onPress={ ()=> {} } style={{ backgroundColor: 'rgba(0,0,0,0.4)', padding: 10, borderRadius: 20}}>
            <Icon color="white" name="icon-abrazo" size={24} />
          </TouchableOpacity>

          <TouchableOpacity onPress={ ()=> {} } style={{ backgroundColor: 'rgba(0,0,0,0.4)', padding: 10, borderRadius: 20}}>
            <Icon color="white" name="recomendarmetoo" size={24} />
          </TouchableOpacity>

          <TouchableOpacity onPress={ ()=> {} } style={{ backgroundColor: 'rgba(0,0,0,0.4)', padding: 10, borderRadius: 20}}>
            <Icon color="white" name="icon-guardar" size={24} />
          </TouchableOpacity>
        </View>
       
      </View>
    )
  }

  renderStickyHeader() {
    return (
      <View style={{flexDirection: 'row', height: stickyHeaderHeight, paddingTop: 20, backgroundColor: 'rgba(0,0,0,0.4)'}}>
    
          <TouchableOpacity onPress={ () => Actions.pop() } style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{color: 'white', fontWeight: '600'}}>Back</Text>
          </TouchableOpacity>
          
          <View style={{alignItems: 'center', justifyContent: 'center', flex: 3}}>
            <Text style={{ color: 'white', fontWeight: 'bold'}}>{ title }</Text>
          </View>

          <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text style={{color: 'white', fontWeight: '600'}}>Compartir</Text>
          </TouchableOpacity>

      </View>
    )
  }
  
  render() {
    const { data } = this.props
    
    return (
      <ParallaxScrollView
        backgroundColor         = "transparent"
        contentBackgroundColor  = "pink"
        parallaxHeaderHeight    = { parallaxHeaderHeight }
        stickyHeaderHeight      = { stickyHeaderHeight }
        bounces                 = { false }
        renderBackground        = { () => {
          return <Image source = {{ uri: data.imagen, width: window.width, height: parallaxHeaderHeight }} /> 
        }}
        // renderScrollComponent={() => <Animated.View />}
        // renderScrollComponent={() => <AnimatedCustomScrollView />}
        renderForeground        = { () => this.renderExpandedHeader() }
        renderStickyHeader       = { () => this.renderStickyHeader() }
      >
        <View style={{ height: 500 }}>
          <Text>Scroll me</Text>
        </View>
      </ParallaxScrollView>

[nicotroia]

I was able to work around this by animating the sticky header out of the way before the user scrolls. This allows presses to happen in that area.

I've made a pull request to show the code to do it. Please have a look and implement it yourself if necessary.

[noitcudni]

My workaround is to hook into scrollEvent callback function. If e.nativeEvent.contentOffset.y is <= 0, the parallax-header is fully extended. Then, I set the stickyHeaderHeight to 0, so effectively, the stickyHeader is out of the way. Otherwise, I set the stickHeaderHeight back to its original height.

[jakubgrzelak]

@noitcudni Your solution is simple and brilliant! Thanks for posting this

[vaibhgupta09]

@noitcudni mann you make my day 👍

[brambang]

My workaround is to hook into scrollEvent callback function. If e.nativeEvent.contentOffset.y is <= 0, the parallax-header is fully extended. Then, I set the stickyHeaderHeight to 0, so effectively, the stickyHeader is out of the way. Otherwise, I set the stickHeaderHeight back to its original height.

how to implement this?

[brambang]

I was able to work around this by animating the sticky header out of the way before the user scrolls. This allows presses to happen in that area.

I've made a pull request to show the code to do it. Please have a look and implement it yourself if necessary.

i got error: Invariant violation: inputRange must be monotonically non-decreasing

[johhansantana]

My workaround is to hook into scrollEvent callback function. If e.nativeEvent.contentOffset.y is <= 0, the parallax-header is fully extended. Then, I set the stickyHeaderHeight to 0, so effectively, the stickyHeader is out of the way. Otherwise, I set the stickHeaderHeight back to its original height.

how to implement this?

add a onScroll prop to this library component and set the e.nativeEvent.contentOffset.y result in a state that you can access then just do

onScroll={e => setScrollPosition(e.nativeEvent.contentOffset.y)}
stickyHeaderHeight={scrollPosition <= 0 ? 0 : 80 } // or whatever height you want