Add numberOfLines prop to DataTableTitle

[Taym95]

Add a numberOfLines prop to DataTable.Title
Try to fix #848

[callstack-bot]

Hey @Taym95, thank you for your pull request 🤗. The documentation from this branch can be viewed here. Please remember to update Typescript types if you changed API.

[satya164]

Use defaultProps for the default value

[satya164]

@allcontributors[bot] let's add @Taym95 to contributors for code

[iamautomaton]

Hi, i am developing the web app using react native. I found this plugin and it is useful for me. However, my datatable title is too long so i add numberofLines want to solve the problem, it doesn't work. It still showing "..." of my long title. Hope can fix this issue. Thanks

[Trancever]

@iamautomaton That's how numberOfLines works. It truncates the text and append 3 dots to the end.

[iamautomaton]

@Trancever Maybe i am not explaining clearly, i will make it more easy to understand.

I am writing a report page, i am designing a form which is showing the detail of some applicant information. i want to show "English Name of Applicant" on one of my form title of my report page. However, i set the numberOfLines to two, it still showing one line with "...". I am expecting it will show two line of the title

Expected

English Name of
Applicant

Actually

English Name of App...

Below is my code and the ScreenCap

Code:

<DataTable.Header>
....
<DataTable.Title numberOfLines={2} style={{alignSelf:'stretch',justifyContent:"center",padding:10,width:150,flexDirection:'row'}}><Text style={{flex: 1, flexWrap: 'wrap'}}>English Name of Applicant</DataTable.Title>
<DataTable.Title style={{alignSelf:'stretch',justifyContent:"center",padding:10,width:150,flexDirection:'row' }}><Text style={{flex: 1, flexWrap: 'wrap'}}>Phone Number</DataTable.Title>
<DataTable.Title style={{alignSelf:'stretch',justifyContent:"center",padding:10,width:150,flexDirection:'row' }}><Text style={{flex: 1, flexWrap: 'wrap'}}>Address</DataTable.Title>
....
</DataTable.Header>

ScreenCap:

[Surangaup]

@Trancever Maybe i am not explaining clearly, i will make it more easy to understand.

I am writing a report page, i am designing a form which is showing the detail of some applicant information. i want to show "English Name of Applicant" on one of my form title of my report page. However, i set the numberOfLines to two, it still showing one line with "...". I am expecting it will show two line of the title

Expected

English Name of
Applicant

Actually

English Name of App...

Below is my code and the ScreenCap

Code:

<DataTable.Header>
....
<DataTable.Title numberOfLines={2} style={{alignSelf:'stretch',justifyContent:"center",padding:10,width:150,flexDirection:'row'}}><Text style={{flex: 1, flexWrap: 'wrap'}}>English Name of Applicant</DataTable.Title>
<DataTable.Title style={{alignSelf:'stretch',justifyContent:"center",padding:10,width:150,flexDirection:'row' }}><Text style={{flex: 1, flexWrap: 'wrap'}}>Phone Number</DataTable.Title>
<DataTable.Title style={{alignSelf:'stretch',justifyContent:"center",padding:10,width:150,flexDirection:'row' }}><Text style={{flex: 1, flexWrap: 'wrap'}}>Address</DataTable.Title>
....
</DataTable.Header>

ScreenCap:

Did you fix this?

[mikehardy]

I think I repaired the original implementation so that it handles text component's special text alignment issues with wrapping, while allowing a cell height that is a multiple of numberOfLines - patch-package patch available here for testing: #3015 (comment)

[mikehardy]

My PR attempting to address this is release now in 4.12.0, hopefully it works for everyone!