Registry / web-framework / react-native-render-html

react-native-render-html

library6.3.4jsnpmunverified

react-native-render-html is a powerful, open-source JavaScript component for React Native that translates HTML content into 100% native views across iOS, Android, macOS, and Windows. Unlike WebView-based solutions, it aims for improved performance and a truly native look and feel. The current stable version is v6.3.4, with the v6 "Foundry" release representing a major architectural rewrite focused on enhanced features, performance, and accessibility. The library is actively maintained with regular patch releases and significant minor updates (like v6.2.0 which focused on accessibility improvements). Key differentiators include its highly customizable and "hackable" API, extensive styling options, and robust support for custom renderers and HTML model definitions. It also ships with comprehensive TypeScript types, ensuring type safety for developers.

web-framework

npm install react-native-render-html

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-RENDE

react-native-render-html

web-frameworkjavascriptv6.3.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

RenderHtml

✓ import { RenderHtml } from 'react-native-render-html';

✗ import RenderHtml from 'react-native-render-html'; // RenderHtml is a named export. const RenderHtml = require('react-native-render-html'); // ESM-only since v3, CJS require will not work correctly without transpilation or specific setup.

This is the main component used to render HTML. Always use named import.

HTMLElementModel

✓ import { HTMLElementModel } from 'react-native-render-html';

✗ const HTMLElementModel = require('react-native-render-html').HTMLElementModel;

Used for defining custom HTML element models, especially useful for non-standard tags or overriding default behaviors. Part of the v6 custom rendering API.

useRendererProps

✓ import { useRendererProps } from 'react-native-render-html';

A hook available since v6 for accessing props within custom renderers, replacing previous prop-drilling patterns.

This quickstart demonstrates rendering a complex HTML string using the `RenderHtml` component. It includes basic styling, links, images, lists, and utilizes `useWindowDimensions` for responsive rendering. It also showcases applying custom `tagsStyles`.

import React from 'react'; import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native'; import { RenderHtml } from 'react-native-render-html'; const source = { html: ` <h1>Hello from React Native!</h1> <p>This is a <strong>rich text</strong> example rendered by <code>react-native-render-html</code>.</p> <p>It supports <a href="https://meliorence.github.io/react-native-render-html/">links</a>, images, and various HTML elements.</p> <img src="https://reactnative.dev/img/tiny_logo.png" alt="React Native Logo" width="50" height="50" /> <ul> <li>Item one</li> <li>Item two</li> </ul> <p style="color: #007bff; text-align: center;">Custom styles are also applied.</p> ` }; export default function App() { const { width } = useWindowDimensions(); return ( <View style={styles.container}> <ScrollView style={styles.scrollViewContent}> <RenderHtml contentWidth={width} source={source} tagsStyles={{ p: { marginVertical: 5 }, h1: { color: 'purple' }, a: { color: 'blue', textDecorationLine: 'underline' } }} /> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 50, paddingHorizontal: 15, backgroundColor: '#fff', }, scrollViewContent: { flex: 1 } });

Debug

Known issues

breakingVersion 6 (The Foundry release) is a complete rewrite with significant breaking changes. Many props have been renamed, removed, or changed their behavior, and the custom renderer API is entirely different.

fix

Consult the official migration guide from v5 to v6 on the library's website. Pay close attention to changes in custom renderers, styling props (e.g., `baseFontStyle` to `baseStyle`), and image dimension props (`imagesMaxWidth` to `computeEmbeddedMaxWidth`).

affects: >=6.0.0

breakingThe `iframe` tag is no longer rendered by default in v6, and `react-native-webview` has been removed from peer dependencies. Direct rendering of iframes is not supported out-of-the-box.

fix

For iframe support, install and use the `@native-html/iframe-plugin` package.

affects: >=6.0.0

gotchaCSS properties passed to `tagsStyles`, `classesStyles`, `allowedStyles`, and `ignoredStyles` must now be camelCased (e.g., `text-align` becomes `textAlign`) in v6.

fix

Update all CSS property names in your style objects to their camelCase JavaScript equivalents.

affects: >=6.0.0

gotchaAccessibility roles for interactive elements might not be automatically applied or rendered if their content model is not correctly set. For example, some interactive elements might need their content model changed to 'block' to be rendered and properly accessible.

fix

Review the documentation on model-based custom rendering and accessibility features in v6.2.0. Ensure interactive elements have appropriate content models and `accessibilityRole` props if custom renderers are used.

affects: >=6.2.0

gotchaPrior to v6.3.4, there was a bug where link presses (`onPress` for `<a>` tags) on Android devices would not work as expected.

fix

Upgrade to version 6.3.4 or higher to resolve the `onLinkPress` issue on Android.

affects: >=6.0.0 <6.3.4

gotchaPrior to v6.3.1, `<b>` tags were not correctly applying bold styling due to a bug.

fix

Upgrade to version 6.3.1 or higher to ensure bold styles are correctly applied to `<b>` tags.

affects: >=6.0.0 <6.3.1

Errors

Common errors & fixes

react-native-render-html Please provide the html or uri prop

The `RenderHtml` component requires either an `html` string or a `uri` for its source prop, which was not provided or was empty.

fix

Ensure the `source` prop is provided as an object `{ html: 'your_html_string' }` or `{ uri: 'your_html_url' }` and that the content is not empty.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)...

This generic React Native error often indicates that `RenderHtml` or one of its dependencies is not correctly imported, or React/React Native peer dependencies are mismatched or missing.

fix

Verify that `react` and `react-native` are correctly installed and meet the peer dependency requirements. Ensure `RenderHtml` is imported using `import { RenderHtml } from 'react-native-render-html';`.

Custom Fonts Not Applying in Inline Styles (React Native RenderHTML)

There's a known limitation or bug where custom fonts defined via inline `style` attributes in HTML may not be correctly applied by `react-native-render-html`.

fix

This issue is often platform-specific or requires workarounds. Consider using `tagsStyles` or `classesStyles` to apply font families that are correctly loaded and recognized by React Native. If the issue persists, refer to the GitHub issues for the latest status or alternative solutions.

Long image cannot show in full screen on Android

This is a known limitation of Facebook's Fresco library (used by React Native's `Image` component on Android) for handling very large images, preventing them from displaying in full if they exceed certain dimensions.

fix

Downsize the image at its source or implement custom image handling logic that pre-processes or resizes images before they are rendered by `react-native-render-html`.

Upgrade

Version history

6.3.4latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components.

react-nativerequiredPeer dependency for React Native environment.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/meliorence/react-native-render-html ↗

packagehttps://www.npmjs.com/package/react-native-render-html ↗

homepagehttps://meliorence.github.io/react-native-render-html/ ↗