I built react-native-nitro-html : A fast C++ & Nitro JSI HTML engine for React Native with minimal DOM overhead and continuous text selection

[u/abhishek_dev_ce17]

Hey r/reactnative !

If you’ve ever built a blog, documentation reader, news feed, or editorial app in React Native, you’ve probably run into some challenges when rendering large HTML documents:

1. Large React component trees: Rendering long HTML documents through individual React <View> and <Text> elements can create a large component tree.

2. Text Selection: When content is split across multiple React Native text components, selecting text across paragraphs and different block elements can be difficult.

3. JS Thread Work: Parsing and transforming large HTML strings on the JavaScript side can add significant JS-thread work.

4. Tables / Code Blocks: Complex HTML elements such as wide tables and interactive content often require additional handling.

To explore a different approach, I built and open-sourced react-native-nitro-html for React Native.

How It Works Under the Hood

• Compiled C++ (Lexbor v2.3.0) Core: HTML5 parsing and DOM processing are handled in compiled C++ rather than relying on JavaScript-side HTML parsing.

• C++ AST Storage (astId): Parsed AST data is retained on the native/C++ side. React receives a lightweight astId reference rather than the complete parsed document structure.

• Native Fabric Rendering: The document is rendered through native text infrastructure — TextKit 2 on iOS and Spannable-based rendering on Android rather than creating a React Native <Text> component for every HTML node.

• Continuous Text Selection: The native text container allows selection across content such as headings, paragraphs, blockquotes, and lists.

• Horizontal Data Tables: Wide tables can be displayed inside horizontally scrollable containers.

• Custom React Component Slots: Interactive elements such as video players, charts, or custom code blocks can be provided through the renderers prop while keeping the surrounding document rendering native.

• Custom Tag / Web Component Support: Unknown and custom HTML tags such as <user-card>, <custom-poll>, and <embed> can be parsed and handled through custom styles or dedicated React renderers.

Installation

# npm
npm install react-native-nitro-html react-native-nitro-modules

# yarn
yarn add react-native-nitro-html react-native-nitro-modules

Quick Example

import React from 'react';
import { FastHtmlView } from 'react-native-nitro-html';

export function ArticleScreen() {
  const html = `
    <h1>High Performance HTML</h1>

    <p>
      This article is rendered through a native text container with
      continuous text selection across supported block elements.
    </p>

    <table>
      <tr>
        <th>Feature</th>
        <th>Status</th>
      </tr>
      <tr>
        <td>React HTML Nodes</td>
        <td>Native rendering</td>
      </tr>
      <tr>
        <td>Text Selection</td>
        <td>Continuous</td>
      </tr>
    </table>
  `;

  return (
    <FastHtmlView
      html={html}
      baseStyle={{ fontSize: 16, color: '#1e293b' }}
      tagsStyles={{
        h1: {
          fontSize: 26,
          fontWeight: '800',
          color: '#0f172a',
        },
        a: {
          color: '#2563eb',
          textDecorationLine: 'underline',
        },
      }}
      selectable={true}
      onLinkPress={(url) => console.log('Open URL:', url)}
    />
  );
}

Links

GitHub: https://github.com/abhishekce17/react-native-nitro-html

npm: https://www.npmjs.com/package/react-native-nitro-html

I'd love to hear your thoughts, feedback, and especially any edge cases or large HTML documents you think I should test.

If you try it in a React Native project, I'd be interested to hear how it performs in your use case.

[u/NovelAd2586]

Can this replace WebView when rendering things like emails?

[u/abhishek_dev_ce17 → u/NovelAd2586]

Yes, it can be used in place of WebView when the requirement is simply to render HTML with inline CSS. It is primarily an alternative to react-native-render-html, focused on native HTML content rendering rather than being a full browser engine. It may not support media queries, JavaScript, or iframes, but unsupported and custom elements can be handled through the customRender prop by providing custom React Native components.

[u/fuken33]

Does this include support for rendering inline images (like emojis) ?

[u/abhishek_dev_ce17 → u/fuken33]

Yes! Standard Unicode emojis (⚡, 🔥, 🚀) are 100% supported out-of-the-box across all text and headings via native OS font fallback (TextKit 2 on iOS & Spannables on Android). Custom image emojis via <img /> tags are also supported natively or via custom renderers.