I designed a layout with some text and icons displayed in rows. While it appears properly on iOS, the rows overlap on Android.
const criteriaList = [
{ id: 0, title: 'Noor', checked: false },
{ id: 1, title: 'Friends & Grades', checked: false },
];
The list is shown in the FilterCriteriaList component.
return (
<View style={styles.container}>
<View style={styles.horizontalLine} />
{criteriaList.map((item: CriteriaList) => (
<View key={item.id}>
<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),
},
});
This is where I am including the component:
<View style={styles.filterCriteriaContainer}>
<Text style={styles.greyHeadingText}>Weitere Filter</Text>
<FilterCriteriaList/>
</View>
filterCriteriaContainer: {
paddingTop: moderateScale(35),
zIndex: 1,
},
SNACK EXPO:
Even though it functions correctly on the web version, the rows overlap on the Android version.
How can I rectify this issue?
iOS:
https://i.sstatic.net/bMUsk.png
Android https://i.sstatic.net/dbPMO.png