react-native-render-html

What is react-native-render-html?

react-native-render-html is a powerful library for rendering HTML content in React Native applications. It provides a way to display HTML content with support for custom tags, styles, and scripts, making it highly customizable and versatile for various use cases.

What are react-native-render-html's main functionalities?

Basic HTML Rendering

This feature allows you to render basic HTML content within a React Native application. The code sample demonstrates how to use the RenderHTML component to display a simple HTML string.

import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import RenderHTML from 'react-native-render-html';

const htmlContent = `
  <h1>Hello World</h1>
  <p>This is a simple HTML content.</p>
`;

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <RenderHTML source={{ html: htmlContent }} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

Custom Tag Rendering

This feature allows you to define custom renderers for specific HTML tags. The code sample shows how to render a custom HTML tag with a specific style.

import React from 'react';
import { SafeAreaView, ScrollView, Text } from 'react-native';
import RenderHTML from 'react-native-render-html';

const htmlContent = `
  <custom-tag>Custom Tag Content</custom-tag>
`;

const renderers = {
  'custom-tag': (htmlAttribs, children, convertedCSSStyles, passProps) => {
    return <Text style={{ color: 'blue' }}>{children}</Text>;
  }
};

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <RenderHTML source={{ html: htmlContent }} renderers={renderers} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

Styling HTML Content

This feature allows you to apply inline styles to HTML content. The code sample demonstrates how to render HTML with inline CSS styles.

import React from 'react';
import { SafeAreaView, ScrollView } from 'react-native';
import RenderHTML from 'react-native-render-html';

const htmlContent = `
  <h1 style="color: red;">Styled Header</h1>
  <p style="font-size: 20px;">This is a styled paragraph.</p>
`;

const App = () => {
  return (
    <SafeAreaView>
      <ScrollView>
        <RenderHTML source={{ html: htmlContent }} />
      </ScrollView>
    </SafeAreaView>
  );
};

export default App;

Other packages similar to react-native-render-html

react-native-htmlview

react-native-htmlview is another library for rendering HTML content in React Native applications. It is simpler and less feature-rich compared to react-native-render-html, making it suitable for basic HTML rendering needs without extensive customization.

react-native-webview

react-native-webview is a powerful library that allows you to embed web content in a React Native application. While it can render HTML content, it is more suited for displaying entire web pages and running JavaScript, making it more versatile but also more complex than react-native-render-html.

README

react-native-render-html

^{Based on the original work of Thomas Beverley, props to him.}

An iOS/Android pure javascript react-native component that renders your HTML into 100% native views.

🗃️ Releases

The Foundry (v6) release is finally stable, and is now-on the recommended version. Check out the announcement blog post in our brand new website. We also have a migration guide for those who are coming from v5 and below.

:warning: You are on the master branch which is home for the latest development. Check the table bellow to get documentation for your exact version.

Minor	Branch	Documentation	Latest
next	master	-
6.3	release/6.3	Official Website
5.1	release/5.1	release/5.1/README.md
4.2	release/4.2	release/4.2/README.md

:computer: Install

npm install react-native-render-html

yarn add react-native-render-html

:speedboat: Basic Usage

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

const source = {
  html: `
<p style='text-align:center;'>
  Hello World!
</p>`
};

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={source}
    />
  );
}

:blue_book: Documentation

See our official website and the official Discovery App.

:iphone: Example

You like to learn by example? We have a tutorial from which the demo GIF has been extracted: A WebView-free Blog App with React Native Render HTML.

:notebook: Changelog

The changelog is available here: packages/render-html/CHANGELOG.md.

:bulb: Help

Please refer to our dedicated document.

👥 Community

You're always welcome to join our discord channel :-).

:pencil: Contributing

Check-out our contributing guide.

• You can report bugs in our Issue Tracker;
• We handle Feature Requests in our Canny board.

:blue_heart: Sponsorship

Want to support this project or hire us to implement a feature? Check out this page.

:balance_scale: License

The source code is licensed under BSD 2-Clause "Simplified" License.