Currently, I am facing an issue with my Scrollview as its children are not clickable despite having a position of absolute. Click events seem to just pass through them and interact with components below. I have searched extensively for a solution online, but there aren't many helpful resources available. One suggestion I came across was to set the height of the scrollview explicitly. I also tried adding elevation, but it had no effect. Unfortunately, I have not been able to find any other viable solutions.
This problem seems to be specific to Android, as I am unable to test it on iOS at the moment.
export const Component: FC = ({}) => {
const popUpRender = () => {
return [
durations.map(duration => {
return (
<TouchableOpacity
key={duration}
onPress={() => {
console.log('clicked')
}}>
<Text>text</Text>
</TouchableOpacity>
)
}),
]
}
return (
<View style={styles.container}>
<ScrollView style={[styles.popUp]}>{popUpRender()}</ScrollView>
</View>
)
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
zIndex: 11,
},
popUp: {
position: 'absolute',
elevation: 5,
zIndex: 100,
width: '100%',
height: 200,
backgroundColor: 'white',
},
})
I must maintain the scrollview's absolute position. Is there a way to ensure its children remain clickable?