We can't detect press on the image

[pcrouillere]

When I click on the image in the parallaxview nothing is detected, why ?

We can not use https://github.com/oblador/react-native-lightbox with parallax and its really bad.. :(

[magrinj]

It's a good point, touch isn't detected on background and foreground view, it's annoying :/ I look a little bit into the code and I can't really find why the touch doesn't work

Edit:

I look again the code, and I think it's because background view and foreground view are wrapped in Animated.View, so I think it's why the touchable events doesn't work, maybe a react-native bug

[pcrouillere]

I was thinking the same, but in lightbox we have this :

  <View
        ref={component => this._root = component}
        style={this.props.style}
        onLayout={() => {}}
      >
        <Animated.View style={{opacity: this.state.layoutOpacity}}>
          <TouchableHighlight
            underlayColor={this.props.underlayColor}
            onPress={this.open}
          >
            {this.props.children}
          </TouchableHighlight>
        </Animated.View>
        {this.props.navigator ? false : <LightboxOverlay {...this.getOverlayProps()} />}
      </View>

So apparently something wrapped in Animated.View can be touchable (?!) I really don't get why it's not working in this case, too bad :(

[magrinj]

Strange... Normally a component can be touchable in an Animated.View but in the old version of react-native this bug happened on Android, so I was wondering if in the latest release something broke up but apparently not. Maybe it's a problem with the Scroll component but I don't think so :/

[techmentormaria]

+1

[magrinj]

Ok so I look deep into the code, and I don't really understand why touchable components doesn't work in the background, but I think that's can be due to all the view behind the background component. In my app I just set my button in the foreground and that's working! :)

In my first message, I said that it doesn't work, but the problem was I don't use TouchableWithoutFeedback in the right way, this component seem to doesn't take style props, so all the style need to be applied to the child view.

Instead you can also use TouchableOpacity, with this one you can apply a style.

Hope that's gonna help everyone!

[bhavyata9]

If you make the following changes in the source in index.js it should work:

_maybeRenderStickyHeader({ parallaxHeaderHeight, stickyHeaderHeight, backgroundColor, renderFixedHeader, renderStickyHeader }) { const { viewWidth, scrollY } = this.state; if (renderStickyHeader || renderFixedHeader) { const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight); return ( <View style={[styles.stickyHeader, { width: viewWidth, ...(stickyHeaderHeight ? { height: scrollY._value>0?stickyHeaderHeight:0 } : null ) }]}> { renderStickyHeader ? ( <Animated.View style={{ backgroundColor: backgroundColor, height: scrollY._value>0?stickyHeaderHeight:0, opacity: interpolate(scrollY, { inputRange: [0, p], outputRange: [0, 1], extrapolate: 'clamp' }) }}> <Animated.View style={{ transform: [{ translateY: interpolate(scrollY, { inputRange: [0, p], outputRange: [stickyHeaderHeight, 0], extrapolate: 'clamp' }) }] }}> { renderStickyHeader() } </Animated.View> </Animated.View> ) : null } { renderFixedHeader && renderFixedHeader() } </View> ); } else { return null; } } }

And in _onScroll(e)

_onScroll(e) { const { parallaxHeaderHeight, stickyHeaderHeight, onChangeHeaderVisibility, onScroll: prevOnScroll = () => {} } = this.props;

const p = pivotPoint(parallaxHeaderHeight, stickyHeaderHeight);

this._maybeUpdateScrollPosition(e);

if (e.nativeEvent.contentOffset.y >= p) { onChangeHeaderVisibility(false); } else { onChangeHeaderVisibility(true); } this.forceUpdate(); prevOnScroll(e); }

[pcrouillere]

Hey @bhavyata9 Thank you ! But can you use "Insert code", cause I think there are some mistake in your code, for exemple "return ( 0?stickyHeaderHeight:0 } : null ) }]}>".

Thanks in advance :)

[bhavyata9]

index.txt

[pcrouillere]

@bhavyata9
It's not working, still no lightbox :( but thanks :)

[magrinj]

@pcrouillere Did you try to put your button in the foreground as I suggest in my last message ?

[pcrouillere]

@magrinj I'm going to try today ! But with the button I have to make my "own" lightbox I think.

[magrinj]

@pcrouillere Oh yes sorry I forgot that LightBox wrap the image child and detect the click :/ Yes maybe you have to do your own lightbox for this.

[magrinj]

@pcrouillere You can also modify lightbox code, to enable it to be opened programmatically

[sebastienbarteau]

This component can render a foreground view and a background view but the parrallax is only on the background view. Whereas the foreground view detects the click. So as @magrinj said, you need to make a transparent button on the foreground if you want to make it work. For instance a view with opacity 0 containing a ligthbox component. This should do the trick. Didn't test on IOS but it should work too.

Regards, Sébastien

[tanpuer]

using zIndex and the background view can detects the click, but it needs react-native version higher than 0.30

[nbastoWM]

I'm trying to insert a carousel in the parallax background but it also doesn't get the touch event. The only one I could get to appear correctly is react-native-looped-carousel but I have to put it on autoplay or else it just stays on the first image. I tried viewpager or image-slider but with no success.

@tanpuer how can you make it detect the click with zIndex? I tried in the <View> inside the renderBackground, I tried in the <Carousel> component, but the click or drag is not detected.

[connorbrathwaite]

@nbastoWM any progress on figuring this out?

[davidroman0O]

@nbastoWM Yeah, something to say ? :)

[matteo-pennisi]

+1

[shukerullah]

+1

[chookg]

+1

[artsx]

+1

[nbastoWM]

Unfortunately I had to abandon Parallax in order to have a scroll of images with swipe. None of what I tried could detect the touch swipe in the parallax.

[fungilation]

Can't reproduce. Touch events in images or otherwise all work in background, foreground and renderStickyHeader.