What is the reason for this alignment difference in a web application that runs on Mac and Windows? (ReactNative)

Question

We have a web application written by react native. The alignment of the columns in the list changes when I run the application on Windows and on Mac, as shown in the photos. I have many other lists, and I have not experienced this issue in any of them. However, I developed the previous lists on Windows, whereas I developed this particular list on Mac.

alignment on windows

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',
    },

Answer 1

I refactored CompilerListItemIssue while protecting onPress ability on cell, I used TouchableOpacity from 'react-native' so please add it on top of the file.

CompilerListItemIssue:

    <>
      <TouchableOpacity style={styles.cellContainer} key={props.data.issueId} onPress={() => handleItemPress(props.data.issueId, false)} onLongPress={() => handleItemPress(props.data.issueId, true)}>
        <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>
      </TouchableOpacity>

      <Snackbar duration={3000} visible={snackVisible} onDismiss={() => setSnackVisible(false)} style={styles.snackbar}>
        {snackText}
      </Snackbar>
    </>