Cannot tap element on renderFixedForeground

[DevCappe]

Hi, tanks for this amazing component.
I'm having an issue tapping on a button inside the renderFixedForeground.
When I scroll down and the header collapses, it works perfectly.

In the following example you can see that the button is not tappable until you scroll all the way down.
Thanks in advance.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  Button
} from 'react-native';
import HeaderImageScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';

export default class imageScroll extends Component {
  render() {
    return (
      <HeaderImageScrollView
        maxHeight={200}
        minHeight={58}
      
        renderFixedForeground={() => {
          return(
          <View style={styles.header}>
            <Button title="TEST" onPress={() => console.log('tap!!')}/>
          </View>)
           
        }}
        renderHeader={() => (
          <Image source={require('./photo.jpg')} style={styles.image} />
        )}
      >
        <View style={{ height: 1000 }}>
          <TriggeringView onHide={() => console.log('text hidden')} >
            <Text>Scroll Me!</Text>
            
          </TriggeringView>
        </View>
      </HeaderImageScrollView>
    );
  }
}

const styles = StyleSheet.create({
  header :{
        flex: 1,
        height: 56,
        padding: 10,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        justifyContent: 'center',
  }
});

AppRegistry.registerComponent('imageScroll', () => imageScroll);

[Nhacsam]

Hello,
Thanks for reporting me your issue.

Unfortunately, I don't know how to fix your problem.
To fix performance issues on Android, I put the ScrollView above the fixedForeground. So, when you try to tap your button, your are touching the ScollView instead.

I haven't any idea of implementation which is good on android and allow you to set Touchable in the fixedForeground.

Nevertheless, I changed the foreground to be rendered above the scrollView in the 0.5.0 version. So, if it's possible for you, you can add your button in the renderForeground method.

[Silvercast]

+1

[denghejun]

+1
It will be a perfect component if we can fix the issue. After all, we need render some touchable button or something like that to interact with user. Absolutely that will be cool.

[Nhacsam]

I added a method renderTouchableFixedForeground which use the old implementation in the v0.6.0
So you can use it to render a FixedForeground which accept Touchable.

But like I said, there is very bad perf on Android.
Every ideas to improve that are welcome.

|

[denghejun]

But after I upgrade to V0.6.0 and use the renderTouchableFixedForeground, it works for fixed foreground, but the renderForeground can NOT be touchable any more!
Did I miss something?

[Nhacsam]

The Basic usage example still works for me. Can I see your code ?

[Nhacsam]

I tried to work on that issue today, but with no success. I guess I need help to find a solution.

The following schemas represent the current implementation of the module after a small scroll.

With overflow	Without overflow

The legend :

• Red : The header container. It has absolute position on top and fixed height. Above it, the image and the overlay
• Blue: The fixed foreground. It stay on top too but it is above the overlay
• Black: The scrollView container
• Green: The scrollView. The scroll view is above the header. It go down a bit when you scroll to let some space to the navbar.
• Pink: The scrollView content. I added a transformY to be able to see the image behind.
• Orange: The Touchable fixed foreground. Same implementation than the old header
• Yellow: The foreground. It scroll top with the scrollView

As you see, the scrollVIew is above the header and the fixed foreground. That's why we can't press on it. The scrollView take the event from the Responder system.

If you want to see the code with the color : #21

In the previous implementation, the header was above the scrollView (same legend)

With overflow	Without overflow

I reduce the height of the header container (in red) on scroll. The header container have an overflow: hidden. The image and the fixed foreground are placed with absolute positioning inside and are cropped when the container height reduce (like you suggested @tychota)
The code is here : #20 (with the colors: #19)

Everything stay touchable but it is very laggy. I guess it is related to the image rerendering or too much time between the ScrollView event.

(This is a 60FPS gif)

@tychota @Almouro @yleflour @4ian Anyone of you have an Idea on what I can do ?

[tychota]

Cc @brentvatne, do you have any idea? We spoke about those kind of animation a while ago and you told me of a bug in RN and a way to bypass it.

[Nhacsam]

I maybe gonna try a new implementation with https://github.com/cesardeazevedo/react-native-nested-scroll-view but i will add a native dependency