I am currently working on animating a message to always appear at the top of the screen even when scrolling. The animation triggers perfectly when clicking on onButtonClick from my FlatList component. However, I have encountered a small issue where the Animated.View is positioned absolutely at the top of the screen, causing the topmost element of the Flatlist to be unclickable. I attempted to adjust the zIndex but it didn't seem to have any effect.
How can I resolve this clickability issue while maintaining the current animation functionality?
//styles
notification: {
position: 'absolute',
top: 50,
alignSelf: 'center',
zIndex: 100
},
notificationWrapper: {
height: 100,
width: 270,
backgroundColor: 'rgba(255,255,255,1)',
borderRadius: 10,
marginTop: 40,
marginBottom: 40,
marginLeft: 28,
marginRight: 28,
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 28
}
//js
onButtonClick = () => {
this.fadeIn.setValue(0);
Animated.timing(
this.fadeIn,
{
toValue: 1,
duration: 1000,
}
).start(() => {
setTimeout(() => {
this.fadeOut();
}, 2000);
});
}
fadeOut = () => {
this.fadeIn.setValue(1);
Animated.timing(
this.fadeIn,
{
toValue: 0,
duration: 1000,
}
).start();
}
<Fragment>
<ScrollView style={[styles.mainContainer, {flex: 1}]}>
<FlatList
style={{ paddingTop: 10, paddingLeft: 20, paddingRight: 20 }}
data={favouriteData}
keyExtractor={this.keyExtractor}
renderItem={this.rendeCampus}
/>
</ScrollView>
<Animated.View
style={[styles.notification, {opacity: this.fadeIn, zIndex:
this.fadeIn}]}
>
<View style={styles.notificationWrapper}>
<Text style={{
fontSize: 12,
lineHeight: 15,
color: 'rgba(42,36,66,1)',
width: 270
}}>This restaurant has been added to your favourites list</Text>
</View>
</Animated.View>
</Fragment>