fix: data table text should allow growth (#180)

Author: dabrad26

example/src/Views/DataTable.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, ScrollView, Alert } from 'react-native';
-import { DataTableCell, DataTableRow, DataTableHeader, DataTableHeaderProps, DataTable, Checkbox, DataTableHeaderSelected } from '@carbon/react-native';
+import { DataTableCell, DataTableRow, DataTableHeader, DataTableHeaderProps, DataTable, Checkbox, DataTableHeaderSelected, Text } from '@carbon/react-native';
 import AddIcon from '@carbon/icons/es/add/20';
 import SearchIcon from '@carbon/icons/es/search/20';
 import SettingsIcon from '@carbon/icons/es/settings/20';
@@ -94,7 +94,7 @@ export default class TestDataTable extends React.Component {
           </DataTableRow>
           <DataTableRow>
             <DataTableCell noPadding={true} width={48} content={<Checkbox style={styles.checkbox} hideLabel={true} label="Checkbox row 2" id="checkbox-2" onPress={(value) => this.setState({ checked2: value })} checked={checked2} />} />
-            <DataTableCell onPress={() => this.alert('Pressed long name cell')} content="Jack Long name that is going to be too big for screen" />
+            <DataTableCell onPress={() => this.alert('Pressed long name cell')} content={<Text text="Testing larger text" type="heading-03" />} />
             <DataTableCell content="3/4/1985" width={100} />
           </DataTableRow>
           <DataTableRow onPress={() => this.alert('Pressed row 3')}>

src/components/DataTable/DataTableCell.tsx

@@ -40,11 +40,11 @@ export class DataTableCell extends React.Component<DataTableCellProps> {
 
     return StyleSheet.create({
       wrapper: {
-        height: 48,
         padding: noPadding ? 0 : 16,
         paddingBottom: noPadding ? 0 : 15,
         paddingTop: noPadding ? 0 : 15,
         flex: 1,
+        justifyContent: 'center',
       },
     });
   }

src/components/DataTable/DataTableRow.tsx

@@ -30,8 +30,7 @@ export class DataTableRow extends React.Component<DataTableRowProps> {
     return StyleSheet.create({
       wrapper: {
         backgroundColor: getColor('layer01'),
-        maxHeight: 48,
-        height: 48,
+        minHeight: 48,
         flexDirection: 'row',
         width: '100%',
         borderTopColor: getColor('borderSubtle00'),