We have a web application built with react native. The alignment of the columns in the list is causing issues when running the app on Windows versus Mac, as illustrated in the screenshots. Interestingly, this problem only occurs with this specific list that was developed on Mac, while other lists created on Windows do not exhibit the same behavior.
https://i.sstatic.net/9JFKO.png alignment on windows
https://i.sstatic.net/kO7fM.png alignment on mac
FlatList:
<FlatList
data={pageList}
keyExtractor={(item, index) => 'ti_' + index}
renderItem={({item}) => <CompilerListItem data={item} isSelected={selectItems.includes(item.branchName)} _onSelectChanges={onSelectChanges} />}
/>
CompilerListItem:
<View style={styles.container}>
<DataTable.Cell
style={styles.checkBox}
onPress={() => {
setIsSelected(!isSelected)
}}>
<Checkbox status={isSelected ? 'checked' : 'unchecked'} />
</DataTable.Cell>
<FlatList //
data={props.data.vwCompilerList}
style={styles.arrayItem}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => <CompilerListItemIssue data={item} />}
/>
</View>
CompilerListItemIssue:
<>
<DataTable.Cell key={props.data.issueId} onPress={() => handleItemPress(props.data.issueId, false)} onLongPress={() => handleItemPress(props.data.issueId, true)}>
<View style={styles.cellContainer}>
<IssueCode style={[styles.issueCellItem, styles.issueCode]} issueCode={props.data.issueCode} priority={undefined} fontSize={17} />
<View style={[styles.issueCellItem, styles.f2]}>
<TableTitle numberOfLines={1}>{props.data.issueSummary}</TableTitle>
</View>
<View style={[styles.issueCellItem, styles.imageArea]}>
<ProfileAvatarItem size={36} uri={props.data._assigneeUserImage} />
</View>
<View style={[styles.issueCellItem, styles.statusResult]}>
<Table2ndText>{props.data.issueStatusStr}</Table2ndText>
</View>
<View style={[styles.issueCellItem, styles.testBoxesField]}>
<View style={styles.testedApproveBox}>
<Table2ndText style={{color: theme.colors.background}}>{props.data.testOnay ?? '?'}</Table2ndText>
</View>
<View style={styles.testedRejectedBox}>
<Table2ndText style={{color: theme.colors.background}}>{props.data.testRed ?? '?'}</Table2ndText>
</View>
</View>
</View>
</DataTable.Cell>
<Snackbar duration={3000} visible={snackVisible} onDismiss={() => setSnackVisible(false)} style={styles.snackbar}>
{snackText}
</Snackbar>
</>
CompilerListItemIssue Styles:
issueCode: {
minWidth: 110,
},
f2: {
flex: 2,
},
cellContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 5,
},
issueCellItem: {
marginEnd: 10,
},
statusResult: {
minWidth: 200,
},
checkBox: {
justifyContent: 'center',
maxWidth: 40,
marginEnd: 10,
},
testBoxesField: {
flexDirection: 'row',
minWidth: 75,
},
testedApproveBox: {
backgroundColor: theme.colors.valid,
borderRadius: 5,
height: 25,
width: 25,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 3,
},
testedRejectedBox: {
backgroundColor: theme.colors.error,
borderRadius: 5,
height: 25,
width: 25,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 3,
},
imageArea: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
minWidth: 60,
marginHorizontal: 10,
},
snackbar: {
backgroundColor: theme.colors.error,
alignSelf: 'center',
},