{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-render-html"],"cli":null},"imports":["import { RenderHtml } from 'react-native-render-html';","import { HTMLElementModel } from 'react-native-render-html';","import { useRendererProps } from 'react-native-render-html';"],"auth":{"required":false,"env_vars":[]},"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    <h1>Hello from React Native!</h1>\n    <p>This is a <strong>rich text</strong> example rendered by <code>react-native-render-html</code>.</p>\n    <p>It supports <a href=\"https://meliorence.github.io/react-native-render-html/\">links</a>, images, and various HTML elements.</p>\n    <img src=\"https://reactnative.dev/img/tiny_logo.png\" alt=\"React Native Logo\" width=\"50\" height=\"50\" />\n    <ul>\n      <li>Item one</li>\n      <li>Item two</li>\n    </ul>\n    <p style=\"color: #007bff; text-align: center;\">Custom styles are also applied.</p>\n  `\n};\n\nexport default function App() {\n  const { width } = useWindowDimensions();\n\n  return (\n    <View style={styles.container}>\n      <ScrollView style={styles.scrollViewContent}>\n        <RenderHtml\n          contentWidth={width}\n          source={source}\n          tagsStyles={{\n            p: {\n              marginVertical: 5\n            },\n            h1: {\n              color: 'purple'\n            },\n            a: {\n              color: 'blue',\n              textDecorationLine: 'underline'\n            }\n          }}\n        />\n      </ScrollView>\n    </View>\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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}