One br tag before blockquote tag is collapsed when using enableExperimentalBRCollapsing in Android

[rohit9625]

I am working on a RN project where I am rendering HTML Hello<br><br><blockquote>World</blockquote> like below:

import React from 'react';
import { useWindowDimensions } from 'react-native';
import RenderHtml from 'react-native-render-html';
import { SafeAreaView } from 'react-native-safe-area-context';

const source = {
  html: `Hello<br><br><blockquote>World</blockquote>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <SafeAreaView>
      <RenderHtml
        contentWidth={width}
        source={source}
        enableExperimentalBRCollapsing={true}
      />
    </SafeAreaView>
  );
}

But, one <br> tag is collapsed. I can say this, Hello<br><blockquote>World</blockquote> and Hello<blockquote>World</blockquote> have the same output. I don't think that the <br> tag should collapse when we have another element after the tag.

I can't fill the bug issue template as I don't know if this is a bug. Is there any workaround to solve this issue? I am just learning RN and don't know how to use custom renderers. Please help me :)

[rohit9625]

Can anyone please tell me why the custom renderer for
tag is not working. Please don't judge by the custom renderer, I was experimenting with it.

import React from 'react';
import { Platform, Text } from 'react-native';
import type { CustomRendererProps, TBlock, TNode, TPhrasing, TText } from 'react-native-render-html';
import { View } from 'react-native';

type BrRendererProps = CustomRendererProps<TText> & {
    key?: string;
};

function renderEmptyLineBreak(tnode: TNode) {
    const lineHeight =
        tnode.styles.nativeTextFlow.lineheight ||
        tnode.styles.nativeTextFlow.fontSize! * 1.4;
    return <View style={{ height: lineHeight }} />;
}

const emptyProps = {
    testID: 'br'
};


function BrRenderer({ TDefaultRenderer, key, renderIndex, renderLength, tnode, sharedProps, ...defaultRendererProps }: BrRendererProps) {
    const isWeb = Platform.OS === 'web';

    const isFirst = renderIndex === 0;
    const isLast = renderIndex === renderLength - 1;
    const parentChildren = tnode.parent?.children;
    const nextNode = parentChildren?.[renderIndex + 1];
    const isFollowedByBr = nextNode?.tagName === "br";

    const isLonelyBreak = isFirst && isLast;
    const shouldCollapse = sharedProps.enableExperimentalBRCollapsing && (isFirst ? isLast && !isWeb : isLast);

    console.log("isFirst ---------------> ", isFirst)
    console.log("isLast ---------------> ", isLast)
    console.log("isLonelyBreak ---------------> ", isLonelyBreak)
    console.log("shouldCollapse -------------> ", shouldCollapse)
    console.log("RenderLength ------------------> ", renderLength)
    console.log("RenderIndex ------------------> ", renderIndex)
    console.log("Parent of node ---------------> ", tnode.parent?.tagName)

    // Remove single <br> (when not followed by another <br>)
    // if (!isFollowedByBr) {
    //     return null;
    // }
  
    return isLonelyBreak && shouldCollapse
    ? renderEmptyLineBreak(tnode)
    : (
      <View style={{ height: shouldCollapse ? 0 : tnode.styles.nativeTextFlow.lineHeight || 14 }} />
    );
}

BrRenderer.displayName = 'BrRenderer';

However, it do work when I set the contentModel to block:

            br: defaultHTMLElementModels.br.extend({
                contentModel: HTMLContentModel.block,
            })