React Native Render HTML

Common errors

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

  cause 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)...

  cause 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)

  cause 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

  cause 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`.

Warnings

• breaking Version 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`).
• breaking The `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.
• gotcha CSS 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.
• gotcha Accessibility 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.
• gotcha Prior 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.
• gotcha Prior 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.

Install

• npm install react-native-render-html npm
• yarn add react-native-render-html yarn
• pnpm add react-native-render-html pnpm

Imports

• RenderHtml
  wrong:

  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.

  correct:

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

  This is the main component used to render HTML. Always use named import.
• HTMLElementModel
  wrong:

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

  correct:

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

  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.

Quickstart

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
  }
});