Hướng dẫn react-native-render-html number of lines

@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.

@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.