0

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.

enter image description here

TylerH
  • 20,799
  • 66
  • 75
  • 101
TreyCollier
  • 181
  • 1
  • 12
  • According to this [github issue](https://github.com/callstack/react-native-paper/pull/2382) MD standards dictate that a `DataTable.Cell` item remains to be one line. The way to overcome this is to replace DataTable.Cell with a View. I'm not sure why it works on mobile though – PhantomSpooks Nov 11 '22 at 20:33

0 Answers0