number of lines Text Component #94

Juliocbr · 2018-02-05T20:32:38Z

Is there a way to use the number of lines as the Text component?.

Thanks.

Exilz · 2018-02-06T17:22:56Z

Hi, unfortunately this is not supported at the moment.

This makes me think it could be a nice idea to add a prop that is spread to all (or only some ?) <Text> elements to add extra props. This could be useful for #85, rather than adding a specific selectable prop.

MSSPL-PiyaleeMaiti · 2018-05-08T09:23:27Z

I need this option like the number of lines. Because I want to show some content on my page doesn't want to show whole content. I need this option. ?Is there any solution to do this?

Juliocbr · 2018-05-09T15:47:37Z

@MSSPL-PiyaleeMaiti the only way I implemented something similar to the number of lines was

text = text.substring(0, numberOfLines) + '...';

You can do something similar to limit the number of characters using substring function, numberOfLines parameter represents the position where to end the extraction.

Exilz · 2018-05-09T15:50:46Z

By the way, if you just want to display like half the content, you can simply truncate the HTML string you're rendering before passing it to the module. It's way easier than having to alter the text nodes themselves.

It might be useful if you want to lock an article and display only half of it to unregistered users, for example.

If that's not what you're looking for, alterData should let you do what you want.

MSSPL-PiyaleeMaiti · 2018-05-10T05:21:15Z

@Juliocbr and @Exilz thank you for your suggestion.

@Juliocbr I am doing using your way, but the problem is if I substring the HTML string it may be cut between any HTML tag and that HTML string will render properly or not! That is the problem of me.

@Exilz I am trying to use alterData as per your suggestion, but in alterData I want to return data at limited length, but it's not returned limited data it showing all data means return whole data. Can't cut data using this method.

MSSPL-PiyaleeMaiti · 2018-06-18T13:19:05Z

@Exilz What is the status of numberOfLines for showing half html content? I need this features urgently. Or can you suggest any alternative solution so that I can show half html content using this package without using any substr() method. substr is not working for html content.

Exilz · 2018-06-18T13:26:26Z

@MSSPL-PiyaleeMaiti a better way to solve your issue would be to use the prop onHTMLParsed. Check out the example in the documentation.

What you could do is to remove some HTML tags from RNElements and return the amount of content you need to display. This would be a safe way to truncate your content without fiddling with an HTML string, I guess. Since RNElements is an array, you could easily count the amount of content you need to display, like if you want to show only 3 paragraphs, you could loop on the variable and cut everything after you encounter your third <p>.

MSSPL-PiyaleeMaiti · 2018-06-21T06:11:08Z

@Exilz I see your example but, I need also html tags when it's show, I want to show half content of a content with html tags. And here in your solution it's remove all html tag then show content without html tags. So what is the solution for my requirement. Can you suggest me?

MSSPL-PiyaleeMaiti · 2018-07-09T06:29:42Z

Is any solution found for this problem? I need this features urgently. Can anyone give me any solution?

yasir-netlinks · 2018-09-04T11:08:36Z

Hi, any updates regarding this! I have a paragraph <p>...</p> and Im trying to limit or shorten amount of characters to be shown.

MSSPL-PiyaleeMaiti · 2018-09-04T11:30:50Z

@yasir-netlinks You can use 'truncate-html', link is below, I solve my problem using this plugin.
https://www.npmjs.com/package/truncate-html

idhindsight · 2019-06-18T15:23:04Z

Any plans to fix this in the future?

cluis13915 · 2019-09-13T00:05:13Z

Interested in this feature to !!!

Asim13se · 2019-12-17T06:06:59Z

Quick workaround is to wrap html view in a view and set maxHeight to 100 which equivalent to 4 line of text approximately:

<View style={{ maxHeight: 100 }}>
    <HTML html='some content' />
</View>

oferRounds · 2019-12-26T10:58:31Z

+1

oferRounds · 2019-12-26T11:00:45Z

@Asim13se interesting, but I see a problem that maxHeight may cut off a work in the middle (while not adding ellipses). Have you experienced it?

cmcaboy · 2020-02-01T18:24:59Z

The maxHeight work around cuts it off on the middle, which is not ideal.

cmcaboy · 2020-02-01T20:54:02Z

I was able to fix this with custom renderers:

<HTML
  html={`<p>${description}</p>`}
  tagsStyles={instructionsStyleDescription}
  renderers={{
    p: (_, children) => <Text numberOfLines={2}>{children}</Text>,
  }}
/>

FFMerlin-aracom · 2020-11-20T14:44:39Z

Unfortunately this doesn't work on all cases, especially for android. If your description contains some other html tags this will cause a crash on android, because you can't have nested views inside a text component. On iOS this works just fine.

jsamr · 2020-11-20T15:20:03Z

This issue will be fixed in 6.x release, where ~~you'll be able to use a special style property for that purpose~~.

jsamr · 2021-01-16T18:09:59Z

With the new foundry pre-release (see #434), you can define a custom renderer as such:

const SpanRenderer = ({ TDefaultRenderer, textProps, ...props }) => {
    return <TDefaultRenderer {...props} textProps={{...textProps, numberOfLines: 2}} />
}

const renderers = {
    span: SpanRenderer
}

jaideepYes · 2021-09-06T13:33:18Z

@jsamr Hello Jules, textProps are not working for me in a custom renderer.
I am trying to work with following demo where textProps={{...textProps, numberOfLines: 2}} have no effect on TDefaultRenderer

import React from "react";
import RenderHTML from "react-native-render-html";

const source = {
  html: `
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus ac sapien sit amet imperdiet. Nunc cursus lacus mi, ut pellentesque elit elementum dignissim. Nulla faucibus lectus id justo sollicitudin scelerisque. Suspendisse iaculis quam a tortor consectetur facilisis. Proin quis nulla et ante rutrum aliquet quis in erat. Aliquam sapien ante, finibus ut tincidunt in, vehicula ac augue. Aliquam varius vulputate commodo. Sed et enim sed elit laoreet semper sed eget neque. Sed lobortis semper euismod. Maecenas a enim aliquet, aliquet lacus sed, ultricies lacus. Nulla tristique dui mi, ultricies pretium ante vestibulum laoreet. Nullam placerat facilisis vestibulum. Integer placerat tempor nisi, non efficitur magna elementum id.
    </p>
  `,
};

const defaultTextProps = {
  //numberOfLines: 2,
};

const ParagraphRenderer = ({ TDefaultRenderer, textProps, ...props }) => {
  return (
    <TDefaultRenderer
      {...props}
      textProps={{ ...textProps, numberOfLines: 2 }}
    />
  );
};

const renderers = {
  p: ParagraphRenderer,
};

function RenderHTMLTest(props) {
  return (
    <RenderHTML
      source={source}
      defaultTextProps={defaultTextProps}
      renderers={renderers}
    />
  );
}

export default RenderHTMLTest;

Although if i provide numberOfLines in defaultTextProps it works. But it's useless in my case. I need to use it inside custom renderer only for certain tag, not for whole html document.

I am testing it on

"expo": "~40.0.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-render-html": "^6.0.5",

I have tested it on both android and iphone. it doesn't work.

jsamr · 2021-09-06T16:12:37Z

@jaideepYes It doesn't apply to TBlock renderers, which p renderer is. You might want to try

const PRenderer = ({ TDefaultRenderer, textProps, ...props }) => {
  const tchildrenAreText = props.tnode.children.every(
    (t) => t.type === "text" || t.type === "phrasing"
  );
  const children = <TNodeChildrenRenderer tnode={props.tnode} />;
  return (
    <TDefaultRenderer {...props}>
      {tchildrenAreText ? <Text numberOfLines={2}>{children}</Text> : children}
    </TDefaultRenderer>
  );
};

const renderers = {
  p: PRenderer,
};

jaideepYes · 2021-09-07T12:38:04Z

@jsamr Thank you for your time to reply. Yes, above method works for me.
I am aware that above html snippet is converted to below Transient Render Tree.

<TBlock tagName="p">
  <TPhrasing anonymous>
    <TText anonymous data="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus ac sapien sit amet imperdiet. Nunc cursus lacus mi, ut pellentesque elit elementum dignissim. Nulla faucibus lectus id justo sollicitudin scelerisque. Suspendisse iaculis quam a tortor consectetur facilisis. Proin quis nulla et ante rutrum aliquet quis in erat. Aliquam sapien ante, finibus ut tincidunt in, vehicula ac augue. Aliquam varius vulputate commodo. Sed et enim sed elit laoreet semper sed eget neque. Sed lobortis semper euismod. Maecenas a enim aliquet, aliquet lacus sed, ultricies lacus. Nulla tristique dui mi, ultricies pretium ante vestibulum laoreet. Nullam placerat facilisis vestibulum. Integer placerat tempor nisi, non efficitur magna elementum id." />
  </TPhrasing>
</TBlock>

and i was supplying textProps to TBlock renderers.
But i was expecting that library passes textProps down the hierarchy by itself to all its children of type === "text" without child tampering . Similarly the way defaultTextProps are applied to all text elements in RenderHTML .

I am grateful for your great work. thank you.

Exilz added the enhancement An enhancement is a change that is not a feature. label Feb 6, 2018

Exilz added is:help wanted We are welcoming PRs to address this. new feature labels Mar 5, 2018

jsamr linked a pull request Nov 26, 2020 that will close this issue

🚀 Foundry release #434

Merged

41 tasks

jsamr mentioned this issue Nov 26, 2020

🚀 Foundry release #434

Merged

41 tasks

jsamr closed this as completed in #434 Jun 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

number of lines Text Component #94

number of lines Text Component #94

Juliocbr commented Feb 5, 2018

Exilz commented Feb 6, 2018

MSSPL-PiyaleeMaiti commented May 8, 2018

Juliocbr commented May 9, 2018 •

edited

Loading

Exilz commented May 9, 2018

MSSPL-PiyaleeMaiti commented May 10, 2018

MSSPL-PiyaleeMaiti commented Jun 18, 2018

Exilz commented Jun 18, 2018

MSSPL-PiyaleeMaiti commented Jun 21, 2018

MSSPL-PiyaleeMaiti commented Jul 9, 2018

yasir-netlinks commented Sep 4, 2018

MSSPL-PiyaleeMaiti commented Sep 4, 2018

idhindsight commented Jun 18, 2019

cluis13915 commented Sep 13, 2019

Asim13se commented Dec 17, 2019

oferRounds commented Dec 26, 2019 •

edited

Loading

oferRounds commented Dec 26, 2019

cmcaboy commented Feb 1, 2020

cmcaboy commented Feb 1, 2020 •

edited

Loading

FFMerlin-aracom commented Nov 20, 2020 •

edited

Loading

jsamr commented Nov 20, 2020 •

edited

Loading

jsamr commented Jan 16, 2021

jaideepYes commented Sep 6, 2021

jsamr commented Sep 6, 2021

jaideepYes commented Sep 7, 2021 •

edited

Loading

number of lines Text Component #94

number of lines Text Component #94

Comments

Juliocbr commented Feb 5, 2018

Exilz commented Feb 6, 2018

MSSPL-PiyaleeMaiti commented May 8, 2018

Juliocbr commented May 9, 2018 • edited Loading

Exilz commented May 9, 2018

MSSPL-PiyaleeMaiti commented May 10, 2018

MSSPL-PiyaleeMaiti commented Jun 18, 2018

Exilz commented Jun 18, 2018

MSSPL-PiyaleeMaiti commented Jun 21, 2018

MSSPL-PiyaleeMaiti commented Jul 9, 2018

yasir-netlinks commented Sep 4, 2018

MSSPL-PiyaleeMaiti commented Sep 4, 2018

idhindsight commented Jun 18, 2019

cluis13915 commented Sep 13, 2019

Asim13se commented Dec 17, 2019

oferRounds commented Dec 26, 2019 • edited Loading

oferRounds commented Dec 26, 2019

cmcaboy commented Feb 1, 2020

cmcaboy commented Feb 1, 2020 • edited Loading

FFMerlin-aracom commented Nov 20, 2020 • edited Loading

jsamr commented Nov 20, 2020 • edited Loading

jsamr commented Jan 16, 2021

jaideepYes commented Sep 6, 2021

jsamr commented Sep 6, 2021

jaideepYes commented Sep 7, 2021 • edited Loading

Juliocbr commented May 9, 2018 •

edited

Loading

oferRounds commented Dec 26, 2019 •

edited

Loading

cmcaboy commented Feb 1, 2020 •

edited

Loading

FFMerlin-aracom commented Nov 20, 2020 •

edited

Loading

jsamr commented Nov 20, 2020 •

edited

Loading

jaideepYes commented Sep 7, 2021 •

edited

Loading