insert space in overlapping rows?

On my screen, I map text, along with an icon (styled as rows). This works well in iOS but the rows (including icons/text) overlap in Android.

I tried using lineHeight as suggested by other SO answers but it didn't work for me. How can I fix this?

The list is rendered in the FilterCriteriaList component.

  return (<View style={styles.container}><View style={styles.horizontalLine} />      {criteriaList.map((item: CriteriaList, index: number) => (<View key={index}><View style={styles.criteriaRow}><Icon              name={item.checked ? 'dot-circle-o' : 'circle-thin'}              color="#31C283"              size={moderateScale(20)}/><Text style={styles.text}>{item.title}</Text></View><View style={styles.horizontalLine} /></View>      ))}</View>  );};const styles = StyleSheet.create({  container: {    flex: 1,  },  criteriaRow: {    flexDirection: 'row',    paddingLeft: moderateScale(25),    alignItems: 'center',  },  horizontalLine: {    width: '100%',    height: moderateScale(1),    backgroundColor: '#f0f0f0',  },  text: {    paddingLeft: moderateScale(15),    paddingBottom: moderateScale(15),    marginBottom: moderateScale(15),    paddingTop: moderateScale(15),  },});

<View style={styles.filterCriteriaContainer}><Text style={styles.greyHeadingText}>Weitere Filter</Text><FilterCriteriaList/></View>  filterCriteriaContainer: {    paddingTop: moderateScale(35),    zIndex: 1,  },

Android:

iOS: