Cannot tap element on renderFixedForeground
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 30/100
- Issue type
- Bug
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- javascript, react-native
- Domain
- mobile
Research direction
Reproduce the provided example using HeaderImageScrollView and its renderFixedForeground prop, then inspect the component path handling that foreground while the header is expanded. Verify the TEST button both before and after scrolling; done means it responds to taps in both states.
Written by the indexing model from the issue text.
Description
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);
- Dominant language
- TypeScript
- Stars
- 1k
- Forks
- 101
- PR merge metrics
- No merged PRs in 30d
Getting set up
This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from bamlab/react-native-image-header-scroll-view
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
bamlab/react-native-image-header-scroll-view#134 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 20/100
-
Difficulty 3/5 1-2 days Newbie friendliness 30/100
-
Difficulty 4/5 3-5 days Newbie friendliness 25/100
bamlab/react-native-image-header-scroll-view#131 · 1 comment ·
All issues in bamlab/react-native-image-header-scroll-view
Similar issues
-
Difficulty 1/5 Under an hour Newbie friendliness 83/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
ranxianglei/billion-context#3583 ·
Maintainers usually reply within 1 day
-
bug:new
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
callstackincubator/simlock#673 ·
Maintainers usually reply within 1 day
-
documentation v3
Difficulty 2/5 1-3 hours Newbie friendliness 73/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 73/100
anomalyco/opencode#56380 · 1 comment ·
Maintainers usually reply within 1 day