RN Show More Text

A React Native component that intelligently truncates text with a customizable "Show more"/"Show less" functionality.

yarn add rn-show-more-text

or

npm install rn-show-more-text

import RNShowMoreText from "rn-show-more-text";

// Basic usage
<RNShowMoreText numberOfLines={3}>
  {
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
  }
</RNShowMoreText>

// With custom styling
<RNShowMoreText
  numberOfLines={3}
  readMoreStyle={{ color: 'blue', fontWeight: 'bold' }}
  readMoreText="Read more"
  readLessText="Read less"
>
  {longText}
</RNShowMoreText>

The RNShowMoreText component supports the following props:

In addition, this component accepts all standard Text Props from React Native.

• Intelligently calculates text truncation with proper ellipsis
• Smooth animation when expanding/collapsing text
• Customizable "Show more"/"Show less" text and styling
• Works with dynamic content and container resizing
• Optimized performance with memoization

Note: Android instability may occur. For example, even though the same paragraph has different lengths, on Android devices, "line bouncing" may occur. For example, if you have a string printed out with 10 lines, if you delete the last 1-2 words of the string, it may also change the number of lines and the length of the lines even with the first lines (which are actually unrelated to the last words). Currently, I do not have a solution to this problem. If anyone has a solution, please create an issue or a PR so we can discuss it, thank you.

The component intelligently calculates the average character width and determines exactly how much text can be displayed within the specified number of lines while leaving room for the "Show more" button. This ensures that text is truncated at a natural point with proper ellipsis.

compensationSpace is the offset parameter, 1 unit corresponds to 1 character. You can understand that for example, when we replace 8 characters i "iiiiiiiii" with 8 characters m "mmmmmmmm", it is possible to make the string "Show more" jump to a new line because they have different widths, I set the default to 6 because in addition to the phrase "Show more" "Show less" or any character you customize, I default to append "... " to the end of the string and it is 4 characters, setting the default to 6 means I am promoting an additional length of 2 characters. Basically, the larger the compensationSpace, the less likely it is that "Show more" will jump to the next line, the smaller the compensationSpace, the more space it will create on the right ("Show more" is not really long enough to reach the end of the line). The values 5,​​6,7,8,9 cover almost all common string cases, unless we have weird strings that are too short or too long with the same number of characters (e.g. iiiiiiiiiiiiiiiiiiiii or mmmmmmmmmmmmmmmmmmmmmm)

MIT