React Native: Text not wrapping on web - css

Question

on my mobile app, my text is wrapping as I would expect, but not on web.
Here is an example of one of the rows in my table:
<DataTable.Row style={styles.dataTableRow}>
<DataTable.Cell style={styles.dataTableCell}>
<View style={styles.tableRow}>
<View style={styles.tableColumn1}><Text style={styles.tableColumnText}>To register you as a new customer</Text></View>
<View style={styles.tableColumn2}><Text style={styles.tableColumnText}>(a) Identity (b) Contact</Text></View>
<View style={styles.tableColumn3}><Text style={styles.tableColumnText}>Performance of a contract with you</Text></View>
</View>
</DataTable.Cell>
</DataTable.Row>
And my styles:
dataTableRow: {
width: "100%",
},
dataTableCell: {
width: "100%",
},
tableRow: {
flexDirection: "row",
alignItems: "center",
},
tableColumn1: {
backgroundColor: colours.primary,
width: 300,
padding: 5,
},
tableColumn2: {
backgroundColor: colours.zettlePrimary,
width: 300,
padding: 5,
},
tableColumn3: {
backgroundColor: colours.status.rejected,
width: 600,
padding: 5,
},
tableColumnText: {
flexWrap: "wrap",
}
I normally wouldn't have all these elements/styles, but I have had trouble formatting this react-native-paper <DataTable>
I have used colours in this picture below just to highlight what is going on. And Like I mentioned, I have had no issue on mobile.