Header numberOfLines > 1 not resulting in wrapped text

[dylanhillier]

Current behaviour

The header does not correctly expand to accomodate content where numberOfLines is greater than 1.

Expected behaviour

I would expect the header to expand and show the contents wrapped correctly.

How to reproduce?

Given the following code, specifically the <DataTable.Title numberOfLines={2} style={{flex: 1}} numeric>...</DataTable.Title>, i would expect the title to appear over two lines and the height of the <DataTable.Header> to expand to accomodate the additional lines. However, this is not the case.

import React, {ReactElement, memo} from 'react';
import {SafeAreaView} from 'react-native-safe-area-context';
import {StyleSheet} from 'react-native';
import {DataTable} from 'react-native-paper';

interface foo {
  id: number;
  date: string;
  value1: number;
  value2: number;
}

const Home = (): ReactElement => {
  const data: foo[] = [
    {id: 1, date: new Date().toLocaleString(), value1: 123, value2: 456},
    {id: 2, date: new Date().toLocaleString(), value1: 323, value2: 131},
    {id: 3, date: new Date().toLocaleString(), value1: 111, value2: 222},
    {id: 4, date: new Date().toLocaleString(), value1: 333, value2: 444},
    {id: 5, date: new Date().toLocaleString(), value1: 555, value2: 666},
  ];

  return (
    <SafeAreaView style={styles.container}>
      <DataTable style={{flex: 1, borderWidth: 1}}>
        <DataTable.Header style={{}}>
          <DataTable.Title numberOfLines={1} style={{flex: 2}}>
            Date
          </DataTable.Title>
          <DataTable.Title numberOfLines={2} style={{flex: 1}} numeric>
            Something Heavy (Kg)
          </DataTable.Title>
          <DataTable.Title numberOfLines={2} style={{flex: 1}} numeric>
            Something Torquey (Nm)
          </DataTable.Title>
        </DataTable.Header>
        {data.map(
          (i: foo): ReactElement => (
            <DataTable.Row key={i.id}>
              <DataTable.Cell style={{flex: 2}}>{i.date}</DataTable.Cell>
              <DataTable.Cell style={{flex: 1}} numeric>
                {i.value1}
              </DataTable.Cell>
              <DataTable.Cell style={{flex: 1}} numeric>
                {i.value2}
              </DataTable.Cell>
            </DataTable.Row>
          ),
        )}
      </DataTable>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default memo(Home);

Preview

Actual

Expected:

Cause

It appears this issue is caused by the default style applied to the DataTableHeader.

I.e. The style with the problem:

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    height: 48,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth * 2,
  },
});

The style which fixes the problem:

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    //height: 48,
    paddingHorizontal: 16,
    borderBottomWidth: StyleSheet.hairlineWidth * 2,
  },
});

It could be i have done something else wrong, in which case can someone please let me know how i should have styled my components to prevent this issue.

[dylanhillier]

Another workaround is:

<DataTable.Header style={{height: 'auto'}}>