Skip to content

Cannot tap element on renderFixedForeground #6

Open
@DevCappe

Description

@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);

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions