Adding support for HTML text

[PopJoestar]

Hi, thanks for this great package, I think it will be good if we add support for HTML text, currently I'm using text-clipper in my project.

[fawaz-ahmed]

Hi @PopJoestar, thanks for those kind words.

The idea seems nice. I will think around it and explore a bit. The problem arises with edge cases, like if a user clicks on a link, since its html then what should happen ? If images are there inside then how to handle those ? Or shall we have another lib with webview for react native ?
If you have some more input on dealing with these please feel free to comment.

[PopJoestar]

I thought we could improve the current renderer to support HTML by passing HTML renderers like https://github.com/meliorence/react-native-render-html through the customTextComponent props.

[fawaz-ahmed]

Hi @PopJoestar, with text-clipper it's possible to render html inside ReadMore component:

import { Dimensions } from 'react-native';
import clip from 'text-clipper';

const htmlString = `
<p style='text-align:left;padding:0;margin:0'>
  Hello World!
  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.
</p>`;

// inside your component

<ReadMore numberOfLines={3}>
  {clip(htmlString, screenWidth, {html: true, stripTags: true})}
</ReadMore

Thanks for pointing out to this great lib: https://github.com/arendjr/text-clipper

[PopJoestar]

Hi @fawaz-ahmed , thanks for the tips! I'm already using it in my project with react-native-render-HTML but I haven't tested it yet with your library

[fawaz-ahmed]

I've tested and shared the sample code. It works great. Thanks @

…

________________________________ From: PopJoestar ***@***.***> Sent: Tuesday, February 22, 2022 5:59:35 PM To: fawaz-ahmed/react-native-read-more ***@***.***> Cc: Fawaz Ahmed ***@***.***>; Mention ***@***.***> Subject: Re: [fawaz-ahmed/react-native-read-more] Adding support for HTML text (Issue #55) Hi @fawaz-ahmed<https://github.com/fawaz-ahmed> , thanks for the tips! I'm already using it in my project with react-native-render-HTML but I haven't tested it yet with your library — Reply to this email directly, view it on GitHub<#55 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AEJEVIDPPKJ2YLUWD53GTULU4OCDPANCNFSM5OGHO5HQ>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[saad9624-tribalScale]

ITs not showing complete HTML just showing 9 lines without picking html classes

[fawaz-ahmed]

@saad9624-tribalScale can you share the response you are getting from the clip method.
I need to know if my lib is showing less lines or is clip method returning lesser text.

[saad9624-tribalScale]

Yeah, its working after adding width to undefined.

[mohil-nft]

@fawaz-ahmed I am using the library with expo, works great on mobile devices, for web I am not able to make this work.

[fawaz-ahmed]

@mohil-nft this package doesn't supports web. It depends on Text component from react-native package for applying logical updates and calculations.

[Faiyyaz]

Hi @PopJoestar, with text-clipper it's possible to render html inside ReadMore component:

import { Dimensions } from 'react-native';
import clip from 'text-clipper';

const htmlString = `
<p style='text-align:left;padding:0;margin:0'>
  Hello World!
  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.
</p>`;

// inside your component

<ReadMore numberOfLines={3}>
  {clip(htmlString, screenWidth, {html: true, stripTags: true})}
</ReadMore

Thanks for pointing out to this great lib: https://github.com/arendjr/text-clipper

But this will strip all the html styles I want to preserve the styles and do the read more