Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6214

unable to click on Icon in android

$
0
0

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.


Viewing all articles
Browse latest Browse all 6214

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>