Cannot tap element on renderFixedForeground

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]

Unfortunately no. Still have no solution for this 😕

[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 ?