Skip to content

Feature Request: Support inline "show more / show less" toggle after ellipsis for truncated HTML content #685

@Salman-s10

Description

@Salman-s10

🙋‍♂️ 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 more

Result:
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!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions