I’m using the react-native-render-html (Foundry release) to render HTML content in my React Native app. The HTML content includes inline images along with text.

My HTML includes text and inline images as shown below:

<div class="bbWrapper">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pariatur anim occaecat mollit amet dolor ut laboris fugiat quis cupidatat non ad reprehenderit id. Nisi ut enim adipisicing duis deserunt anim nostrud duis ex dolore laborum qui incididunt. Labore dolor magna commodo deserunt consectetur.
  .<br>
  lorem ipsum dolor sit amet <img src="https://data.voz.vn/styles/next/xenforo/smilies/popopo/after_boom.png?v=01" srcset="https://data.voz.vn/styles/next/xenforo/smilies/popopo/after_boom.png?v=01 1x, https://data.voz.vn/styles/next/xenforo/smilies/popopo/after_boom_x2.png?v=01 2x" class="smilie" loading="lazy" alt=":after_boom:" title="after_boom    :after_boom:" data-shortname=":after_boom:"></div>

I have customized the img element model to allow mixed content using the following code:

const customHTMLElementModels = {
  img: defaultHTMLElementModels.img.extend({
    contentModel: HTMLContentModel.mixed,
  }),
};

In the main RenderHTML component, I have set the defaultTextProps to specify a custom line height for the text:

<RenderHTML
  contentWidth={width}
  source={source}
  customHTMLElementModels={customHTMLElementModels}
  renderersProps={renderersProps}
  enableCSSInlineProcessing={true}
  debug
  defaultTextProps={{
    selectable: true,
    style: {
      fontFamily: 'sans-serif',
      fontSize: 16,
      fontWeight: '400',
      lineHeight: 24, // layout breaks here
      color: 'black',
    },
  }}
/>

The problem I’m facing is that when I set a custom lineHeight value, it applies the same line height to all the text, including the lines containing inline images. This causes the layout to break and the images to overlap with the text.

However, if I don’t set a custom lineHeight, the lines with inline images have a dynamic height that adjusts based on the image size, and the layout looks fine.

How can I achieve a layout where the lineHeight is set to a default value for regular text, but for lines containing inline images, the height should dynamically adjust to accommodate the image size without breaking the layout?

I would appreciate any suggestions or workarounds to solve this issue while still being able to set a custom line height for the text.

Thank you in advance!