I Have a list with scroll view, I am trying to add filter options for it. When click on a filter icon, an overlay with position:absolute will be displayed inside a Animated.View. I have Buttons inside overlay View with TouchableOpacity
Filter.js
export default class FilterFade extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: props.visible,
};
};
componentWillMount() {
this._visibility = new Animated.Value(this.props.visible ? 1 : 0);
}
componentWillReceiveProps(nextProps) {
if (nextProps.visible) {
this.setState({ visible: true });
}
Animated.timing(this._visibility, {
toValue: nextProps.visible ? 1 : 0,
duration: 300,
}).start(() => {
this.setState({ visible: nextProps.visible });
});
}
render() {
const { visible, style, children, ...rest } = this.props;
const containerStyle = {
opacity: this._visibility.interpolate({
inputRange: [0, 1],
outputRange: [0, 1],
}),
transform: [
{
scale: this._visibility.interpolate({
inputRange: [0, 1],
outputRange: [1.1, 1],
}),
},
],
};
const combinedStyle = [containerStyle, style];
return (
<Animated.View style={combinedStyle} {...rest}>
{children}
</Animated.View>
);
}
}
View.js
<FilterFade visible={this.state.isFilterVisible}>
<View style={styles.filterView}>
<TouchableOpacity onPress={() => this.getFilteedStories}>
<Text style={styles.filterOption}> My Stories </Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.getFilteedStories}>
<Text style={styles.filterOption}> All Stories </Text>
</TouchableOpacity>
</View>
</FilterFade>
Styles
filterView :{
position: 'absolute',
top: 0,
right: 5,
backgroundColor: #CCC,
width: 150,
paddingTop: 15,
paddingBottom: 15,
zIndex: 999,
},
filterOption: {
color: "#FFF",
fontSize: 15
}
Now, When I click on TouchableOpacity Text in Filter, the click event is triggered in Listview which is behind the FadeView.
Can Some one please let me know on how to add press event inside a Animated absolute view.
Thanks in Advance.
