Smart Text Truncation for React Native – RN Show More Text

Description:

RN Show More Text is a React Native component that provides intelligent text truncation with customizable “Show more”/”Show less” functionality.

Features

• 📏 Precise text truncation with proper ellipsis
• 🎭 Customizable “Show more”/”Show less” text and styling
• 📱 Cross-platform support for iOS and Android
• 🔄 Dynamic content and container resizing compatibility
• 🚀 Optimized performance through memoization

Use Cases

1. Long product descriptions in e-commerce apps
2. Expandable content sections in news or blog post previews
3. User-generated content display in social media feeds
4. Collapsible documentation or help text in complex forms

How to Use It

1. Install the package:

yarn add rn-show-more-text

or

npm install rn-show-more-text

2. Import the component:

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

3. Basic usage:

<RNShowMoreText numberOfLines={3}>
  {longText}
</RNShowMoreText>

4. Advanced usage with custom styling:

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

5. Available component props

• numberOfLines (number, required): Maximum number of lines to display before truncating
• children (string, required): Text content to display
• readMoreStyle (StyleProp): Style for the “show more”/”show less” text
• readMoreTextProps (TextProps): Additional props for the “show more”/”show less” text component
• readMoreText (string): Custom text for the “show more” button (default: “Show more”)
• readLessText (string): Custom text for the “show less” button (default: “Show less”)
• compensationSpaceAndroid (number): Extra space for Android truncation calculation (default: 6)
• compensationSpaceIOS (number): Extra space for iOS truncation calculation (default: 6)

The component also accepts all standard Text Props from React Native.

Preview

FAQs

Q: How does the truncation calculation work?
A: The component calculates the average character width and determines how much text can fit within the specified number of lines while leaving room for the “Show more” button. This ensures natural truncation points with proper ellipsis.

Q: How can I customize the appearance of the “Show more”/”Show less” text?
A: Use the readMoreStyle prop to apply custom styling. You can change the color, font weight, or any other text style properties.

Q: Does this component work with dynamic content?
A: Yes, it’s designed to handle dynamic content and container resizing. However, be aware that significant changes to the text or layout may trigger re-calculation and potentially cause visual jumps.