Setting a foreground blocks taps when scrolled

[EyMaddis]

Issue details

When setting a foreground an empty view is created that acts as a placeholder and wrapper. This has position: 'absolute' and the height according to the parallaxHeight property. Because of this, the empty view is always in front of everything that renders as the content of the ScrollView.

          parallaxHeight={300}

          renderParallaxForeground={({ animatedValue, height }) => (
            <View style={{backgroundColor: 'red', width: '100%', height, opacity: 0.5}} />
          )}

slightly scrolled and selected with the React-Native inspector:

Everything below the box is not touchable, i.e. the "Alle Anzeigen" button

• react-native 0.55.0
• react-native-parallax-scroll 1.7.0

Affected platforms

• Both

PR incoming

[EyMaddis]

While the PR #24 does not fix it per se, it allows displaying headers that are supposed go with the scroll offset. In theory the size of the view must be animated, however this blocks useNativeDriver as it cannot animate height outside of the Javascript engine.

[z4o4z]

@EyMaddis can I close this issue? I know, this is not a solution but looks like the good workaround

[EyMaddis]

Well, technically it is not solved, but a workaround is feasible (at least for me). I am fine with closing as long as you don‘t have an idea how to properly fix this.

[EyMaddis]

Maybe this can be properly solved by applying the foreground translation to the placeholder view or container instead of only the foreground. Unfortunately, I do not have time at the moment to look into this.

[z4o4z]

Hi @EyMaddis, I just tried to reproduce your problem and it looks like everything works fine. The foreground wrappers have poinerEvents="box-none" prop, which means that touches won't work for this views, but will work for children. I think this problem can be solved in the client side app. What do you think about it?

[EyMaddis]

I think this problem can be solved in the client side app

What do you mean? Client side meaning "by the user with renderPlaceholderView"?

The wrapper has box-none, but the empty view does not. Maybe the default placeholder view should also get this property.

[z4o4z]

Yep

What do you mean? Client side meaning "by the user with renderPlaceholderView"?

Will add this later. For now, I close this issue

Maybe the default placeholder view should also get this property.