How to limit content number line?

[HarrisKoffi]

Hello,

How to limit html content number line like react component Text props numberofLine?
Thank you!

[Zjarr]

You can do it by creating this renderer and changing the numberOfLines null attribute to your desired number

renderers={{
  p: (_, children, convertedCSSStyles, { allowFontScaling, key }) => {
    return (
      <Text numberOfLines={null} allowFontScaling={allowFontScaling} key={key} style={convertedCSSStyles}>{ children }</Text>
     );
   }
 }}

[OleksandrFomin]

You can do it by creating this renderer and changing the numberOfLines null attribute to your desired number

renderers={{
  p: (_, children, convertedCSSStyles, { allowFontScaling, key }) => {
    return (
      <Text numberOfLines={null} allowFontScaling={allowFontScaling} key={key} style={convertedCSSStyles}>{ children }</Text>
     );
   }
 }}

It applies to each <p> tag of the in your HTML. I receive several <p> under separate <h> tags and it shows the number of lines I enter from each paragraph. Is there any way to do that for the whole document in case it is NOT wrapped by any tag?

EDIT. I ended up wrapping the whole thing into <section> but it broke the content inside. Line breaks in particular, even though I have no other <section> tags inside

[jsamr]

I am closing because this will be resolved by #349.

[ao-tigran]

I wouldn't consider this one as resolved. Yes this solution works when you have text-only content, but in case there are nested block elements the view is getting corrupted. The reason is that View element cannot be nested into Text element.

[jsamr]

@ao-tigran With the powerful new foundry API (#430) you can do something like this (Typescript):

import React from 'react';
import { Text } from 'react-native';
import RenderHtml, {
  TBlock,
  CustomBlockRenderer,
  TNodeChildrenRenderer
} from 'react-native-render-html';
import { SnippetDeclaration } from '../types';

const html = `
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <img width="1200" height="800" src="https://i.imgur.com/XP2BE7q.jpg" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
`;

const ParagraphRenderer: CustomBlockRenderer = function ParagraphRenderer({
  TDefaultRenderer,
  tnode,
  type,
  ...props
}) {
  return (
    <TDefaultRenderer tnode={tnode} {...props}>
      <TNodeChildrenRenderer
        tnode={tnode}
        parentMarkers={props.markers}
        renderChild={({ childTnode, childElement }) =>
          type === "block" ? (
            childElement
          ) : (
            <Text numberOfLines={3}>{childElement}</Text>
          )
        }
      />
    </TDefaultRenderer>
  );
};

const renderHtmlProps = {
  source: { html },
  renderers: {
    p: ParagraphRenderer
  }
};

// ...
<RenderHtml {...renderHtmlProps} />

Result:

Note that the TNodeChildrenRenderer API is not guaranteed to be stable yet, but the feature is here.

[castalonirenz]

On some of my

tags its working but as you can see on the image it doesn't work on the next item.

[jsamr]

@castalonirenz If will only work for direct children of <p> tags, since you're tampering with the children in the ParagraphRenderer. i understand that it is a bit complex to grasp, I'm currently working on the documentation website which will, I hope, help clear some blur.

PS: Your problem is yet a bit ill-defined, but I am available for counseling if you or your company is willing to hire me.

[jsamr]

Closing now since the stable beta which fixes this issue has just been released.

[oferRounds]

Hi @jsamr would you be able to give an example of line limiting? Is there a specific property? Not sure I understood

[jsamr]

@oferRounds see https://stackoverflow.com/a/69200348

[oferRounds]

Hi @jsamr, thank you! Will you be able to give an example? Not quite sure based on the example
(Our html tree contains multiple tag elements, and I don’t want to limit it per tag, but limit the lines number in general)

[MatkoMilic]

Hi @jsamr, thank you! Will you be able to give an example? Not quite sure based on the example (Our html tree contains multiple tag elements, and I don’t want to limit it per tag, but limit the lines number in general)

I need the same thing, trying to figure it out rn