Allow for Text components to support a forced minimum number of lines (numberOfLines)

For Discussion

As of 0.57.0, the Text component’s numberOfLines prop is used to define the maximum number of lines of a string that will be rendered before truncation occurs. This is a bit of a misnomer, as one may anticipate that this prop w

Should this prop be renamed to something such as maxNumberOfLines? Would the maintainers consider the possibility of adding an additional prop, such as minNumberOfLines, which would force the Text component to occupy the minimum space necessary to render the defined amount of lines?

Motivation

Both Android and iOS’s interface guidelines specify that when producing a tappable list of items (such as a list of messages) these items should be of even height.

In order to maintain accessible support for font scaling, a cell’s height should be inferred from the height of the content, however, it is currently impossible to achieve a consistent inferred height from Text’s available props.

Current Behavior

These cells do not have a consistent height

Anticipated Behavior

These cells have a consistent height

[vovkasm]

I personally think that in the example, cell height should be fixed, and contained elements should layout according to available space…

[B3rry]

@vovkasm

cell height should be set on View

Are you saying a calculated height should be applied directly to the View to achieve this? Such as:

 <View style={{height: SomeCalculatedHeight}}>

Yes, this is an option, but at that point you’re still not allowing for standard Flex principles to create a consistently sized text component in a dynamic layout. Is there any reason why consistent, inferred heights should only be available through calculation?

See, you set minNumberOfLines, but text not fit in width… you cell will be higher than others…

Unsure what you mean.

how you set constraints that all cells has the same size and at the same time wrap their content?

This is already a factor of numberOfLines. It does exactly that: defines a set height, wraps the text. Additionally, it truncates text when it runs over. I’d imagine setting a unique offset (bump up the padding?) on each text container that does not meet the calculated size of a text container with n lines could work.

minimumTextContainerHeight = heightOfSingleLine * minimumNumberOfLines + totalVerticalPadding

verticalPaddingToMeetMinimumHeight = minimumTextContainerHeight - (heightOfSingleLine * numberOfRenderedLines)

There’s probably some considerations around how to take around how you get to some of these values, especially given font scaling and line-height inconsistencies between render in iOS and android. I’m unsure of the full scope of these.

Okey, you set minNumberOfLines and maxNumberOfLines (to same value, or cells again will not be same height)… how then you set size for you icons on left side? Etc… etc…

You could use the Flex, nativeEvent and Dimensions achieve this. That’s how it’s done now. Although normal behavior for iOS elements is to not scale icons and images when the text does (in most cases). If you really wanted to, you could use PixelRatio.getFontScale() to scale the Entire UI, or handle responsiveness issues.

This process seems rather complex to produce a consistently sized, responsive component. This is a very common UX pattern in iOS and Android, and I don’t think relying on each developer to implement their own solution is best, in this case.