React-native-paper: Feature request: Customisable numberOfLines for List.Item

[abn-volk]

Current behaviour

List.Item's title and description texts/components are wrapped inside a Text with fixed numberOfLines. As a result, long text elements are always cut off (even when using custom text components with numberOfLines set).

Expected behaviour

It'd be better if there is a way to customise the numberOfLines for item title/description, or at least a way to disable the default behaviour. I know that I can easily replace List.Item with a View, but I'd like to use List.Item for its standard padding/margin and ripple.

Code sample

Snack: https://snack.expo.io/@jibi/react-native-paper-list.item-numberoflines

Screenshots (if applicable)

What have you tried

• Use a Subheading for title with numberOfLines
• Read the source code -> Write a feature request

Your Environment

| software | version
| --------------------- | -------
| ios or android | Android
| react-native | 0.57 (expo 31)
| react-native-paper | 2.3.1
| node | 10.2.1
| npm or yarn | yarn 1.12.3

[raajnadar]

The feature that you are asking is not under material design guidelines. Can tell me what are you trying to do? Maybe I can give you a better alternative solution.

[abn-volk]

I wanted to show some list items with long text, but the text is always cut off. I've switched to a View and it's working fine now.

Oh, and I didn't realise the 3 line limitation is to comply with the MD guideline. I'll close this then.

[tonyxiao]

@raajnadar sometimes guidelines do not correspond to the reality of the data we're trying to present to users.

[tonyxiao]

What alternative would you recommend for a list item that takes a few lines?

[zerobytes]

I must disagree with @raajnadar and say that the implementation that took place on list item does not corresponde to the guidelines, itself.

Material guideline is very clear on giving 3 independent lines or 2 lines and the last can grow wrapping down.

So, to the component to be as the guideline says, it should have a third property to represent the third line, and the behaviour would be the second line to be ellipsed at the end when there is a third line property filled. In case the third line prop does not have content, the second line would be allowed to wrap.

[raajnadar]

Ok Ok, I am opening this issue again..!

[satya164]

We do support 3 line list items. 3 lines don't mean there should be a 3rd prop. It just means that the total number of lines can be 3, as in your screenshots.

[Yajan]

Is it possible to have max of 1 line in the list

[brunohkbx]

996 will make us be able to customize the description prop of List.Item

[ferrannp]

Fixed.