React Native

Quick Start

Guides

components

apis

ExpandingText

A react component for displaying text which supports truncating based on a set truncLength.

In the following example, the text will truncate to show only the first 17 characters plus '...' with a See More button to expand the text to its full length.

render: function() { return <ExpandingText truncLength={20} text={EXAMPLE_TEXT} />; },

Props #

seeMoreStyle Text.propTypes.style #

The styles that will be applied to the See More button. Default is bold.

seeMoreText string #

The caption that will be appended at the end, by default it is 'See More'.

text string #

Text to be displayed. It will be truncated if the character length is greater than the truncLength property.

textStyle Text.propTypes.style #

The styles that will be applied to the text (both truncated and expanded).

truncLength number #

The maximum character length for the text that will be displayed by default. Note that ... will be appended to the truncated text which is counted towards the total truncLength of the default displayed string. The default is 130.

Next →