-
-
Notifications
You must be signed in to change notification settings - Fork 623
Description
🙋♂️ What I’m trying to do
I'm using react-native-render-html to render HTML content and want to:
Truncate the content to a fixed number of lines (e.g., 4).
Show an ellipsis (...) at the end of the last visible line.
Add an inline tappable “show more” after the ellipsis.
On expand, display the full content along with “show less” (either inline or below).
On collapse, go back to the truncated view.
This is a very common UX pattern in apps like Instagram, Twitter, etc.
✅ What works now
I can use numberOfLines to truncate the HTML content.
It properly adds ... at the end when content is longer than allowed.
I can place a “show more” below the truncated content.
❌ What doesn’t work
There’s no way to inject custom text (like "show more") after the ellipsis.
The “show more” text appears below the truncated block, not inline with the last line.
This breaks the UX flow and feels disjointed, especially when dealing with dynamic content.
Current behavior:
show moreResult:
Lorem ipsum dolor sit amet, consectetur...
show more
Desired behavior:
Lorem ipsum dolor sit amet, consectetur... show more
💡 Proposed Solution
A new prop to allow rendering a tappable component after the ellipsis, like:
<RenderHtml
html={htmlContent}
numberOfLines={4}
ellipsisTail={
<Text onPress={toggle} style={{ color: 'blue' }}>
show more
}
/>
Or:
ellipsisTail={{
text: ' show more',
onPress: () => toggle(),
style: { color: 'blue', fontWeight: 'bold' }
}}
This would give us full control to create a natural, inline “read more / less” experience.
🙏 Why this matters
It’s a widely-used pattern in modern apps.
Enhances readability and UX flow.
Currently requires workarounds or custom implementations, which aren’t clean or reliable with rich HTML content.
Let me know if this could be considered for a future release or if there's a recommended workaround within the current package. I’d be happy to help contribute as well — thanks for the great work!