I have a screen where I will render some icons as buttons. It works in iOS but on Android, I am unable to click on the Icon. It has something to do with the overlaying Views/zIndexes. But I am unable to figure it out.
This is my list component where I render the icons.
const criteriaList = [{ id: 0, title: 'Nur Frauen', checked: false }];export const FilterCriteriaList: React.FunctionComponent = () => { const handleChange = (index: number) => { console.log('cccliiickckk', index); }; return (<View style={styles.container}><View style={styles.horizontalLine} /> {criteriaList.map((item: CriteriaList) => (<View style={styles.rowContainer} key={item.id}><View style={styles.criteriaRow}><Icon style={styles.icon} name={item.checked ? 'dot-circle-o' : 'circle-thin'} color="#31C283" size={moderateScale(20)} onPress={() => handleChange(item.id)} /><Text style={styles.text}>{item.title}</Text></View><View style={styles.horizontalLine} /></View> ))}</View> );};const styles = StyleSheet.create({ container: { flex: 1, }, rowContainer: { //flex: 1, paddingTop: 40, }, criteriaRow: { flexDirection: 'row', paddingLeft: moderateScale(25), alignItems: 'center', flex: 1, marginTop: 15, }, horizontalLine: { width: '100%', height: moderateScale(1), backgroundColor: '#f0f0f0', marginTop: 15, }, icon: { paddingBottom: 40, }, text: { paddingLeft: moderateScale(15), paddingBottom: moderateScale(35), marginBottom: moderateScale(15), paddingTop: moderateScale(15), flex: 1, }, button: { backgroundColor: 'red', flex: 1, },});
This is the container for the above mentioned list component.
<View style={styles.filterCriteriaContainer}><Text style={styles.greyHeadingText}>Weitere Filter</Text><FilterCriteriaList/></View>... filterCriteriaContainer: { paddingTop: moderateScale(35), zIndex: 1, },
How can I fix this? I have already tried using TouchableOpacity/buttons as well but I cannot click on them either. Somehow the views are overlapping.