React-native-render-html: 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,
  ...props
}) {
  return (
    <TDefaultRenderer tnode={tnode} {...props}>
      <TNodeChildrenRenderer
        tnode={tnode}
        parentMarkers={props.markers}
        renderChild={({ childTnode, childElement }) =>
          childTnode instanceof TBlock ? (
            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.