{"id":11796,"library":"react-native-render-html","title":"React Native Render HTML","description":"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.","status":"active","version":"6.3.4","language":"javascript","source_language":"en","source_url":"https://github.com/meliorence/react-native-render-html","tags":["javascript","react-native","react-component","react-native-component","html","render-html","typescript"],"install":[{"cmd":"npm install react-native-render-html","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-render-html","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-render-html","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React components.","package":"react","optional":false},{"reason":"Peer dependency for React Native environment.","package":"react-native","optional":false}],"imports":[{"note":"This is the main component used to render HTML. Always use named import.","wrong":"import RenderHtml from 'react-native-render-html';\n// RenderHtml is a named export.\nconst RenderHtml = require('react-native-render-html');\n// ESM-only since v3, CJS require will not work correctly without transpilation or specific setup.","symbol":"RenderHtml","correct":"import { RenderHtml } from 'react-native-render-html';"},{"note":"Used for defining custom HTML element models, especially useful for non-standard tags or overriding default behaviors. Part of the v6 custom rendering API.","wrong":"const HTMLElementModel = require('react-native-render-html').HTMLElementModel;","symbol":"HTMLElementModel","correct":"import { HTMLElementModel } from 'react-native-render-html';"},{"note":"A hook available since v6 for accessing props within custom renderers, replacing previous prop-drilling patterns.","wrong":null,"symbol":"useRendererProps","correct":"import { useRendererProps } from 'react-native-render-html';"}],"quickstart":{"code":"import React from 'react';\nimport { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';\nimport { RenderHtml } from 'react-native-render-html';\n\nconst source = {\n html: `\n

Hello from React Native!

\n

This is a rich text example rendered by react-native-render-html.

\n

It supports links, images, and various HTML elements.

\n \"React\n \n

Custom styles are also applied.

\n `\n};\n\nexport default function App() {\n const { width } = useWindowDimensions();\n\n return (\n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n paddingTop: 50,\n paddingHorizontal: 15,\n backgroundColor: '#fff',\n },\n scrollViewContent: {\n flex: 1\n }\n});","lang":"typescript","description":"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`."},"warnings":[{"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`).","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"For iframe support, install and use the `@native-html/iframe-plugin` package.","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Update all CSS property names in your style objects to their camelCase JavaScript equivalents.","message":"CSS properties passed to `tagsStyles`, `classesStyles`, `allowedStyles`, and `ignoredStyles` must now be camelCased (e.g., `text-align` becomes `textAlign`) in v6.","severity":"gotcha","affected_versions":">=6.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=6.2.0"},{"fix":"Upgrade to version 6.3.4 or higher to resolve the `onLinkPress` issue on Android.","message":"Prior to v6.3.4, there was a bug where link presses (`onPress` for `` tags) on Android devices would not work as expected.","severity":"gotcha","affected_versions":">=6.0.0 <6.3.4"},{"fix":"Upgrade to version 6.3.1 or higher to ensure bold styles are correctly applied to `` tags.","message":"Prior to v6.3.1, `` tags were not correctly applying bold styling due to a bug.","severity":"gotcha","affected_versions":">=6.0.0 <6.3.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The `RenderHtml` component requires either an `html` string or a `uri` for its source prop, which was not provided or was empty.","error":"react-native-render-html Please provide the html or uri prop"},{"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';`.","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.","error":"Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)..."},{"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.","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`.","error":"Custom Fonts Not Applying in Inline Styles (React Native RenderHTML)"},{"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`.","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.","error":"Long image cannot show in full screen on Android"}],"ecosystem":"npm"}