# react-native-render-html

> The hackable, full-featured Open Source HTML rendering solution for React Native.

Latest version **6.3.4** (published 2022-01-24) · BSD-2-Clause license · 0 weekly downloads

## Install

```sh
npm install react-native-render-html
pnpm add react-native-render-html
yarn add react-native-render-html
bun add react-native-render-html
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.3.4 |
| Published | 2022-01-24 |
| First published | 2016-11-29 |
| Weekly downloads | 0 |
| License | BSD-2-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 765 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3663 |
| Author | Meliorence |
| Maintainers | exilz, bd-arc, jsamr |
| Keywords | react-native, react-component, react-native-component, html, render-html |

## Links

- npm: https://www.npmjs.com/package/react-native-render-html
- Repository: https://github.com/meliorence/react-native-render-html
- Homepage: https://meliorence.github.io/react-native-render-html/
- Issues: https://github.com/meliorence/react-native-render-html/issues
- npm.io page: https://npm.io/package/react-native-render-html

## Dependencies (9)

- [ramda](https://npm.io/package/ramda.md) ^0.27.2
- [urijs](https://npm.io/package/urijs.md) ^1.19.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.7
- [@types/ramda](https://npm.io/package/@types/ramda.md) ^0.27.40
- [@types/urijs](https://npm.io/package/@types/urijs.md) ^1.19.15
- [stringify-entities](https://npm.io/package/stringify-entities.md) ^3.1.0
- [@jsamr/counter-style](https://npm.io/package/@jsamr/counter-style.md) ^2.0.1
- [@jsamr/react-native-li](https://npm.io/package/@jsamr/react-native-li.md) ^2.3.0
- [@native-html/transient-render-engine](https://npm.io/package/@native-html/transient-render-engine.md) 11.2.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 6.3.4 (latest) — 2022-01-24
- 6.2.0 (release/6.2) — 2021-10-23
- 6.2.0-alpha.3 (alpha) — 2021-10-20
- 6.1.0 (release/6.1) — 2021-08-29
- 6.0.5 (release/6.0) — 2021-07-31
- 5.1.1 (release/5.1) — 2021-06-04
- 5.0.1 (release/5.0) — 2020-12-17
- 4.2.5 (release/4.2) — 2020-12-05
- 4.1.2 (release/4.1) — 2019-03-01
- 4.0.0 (release/4.0) — 2019-02-05
- 6.3.3 — 2022-01-11
- 6.3.2 — 2022-01-11
- 6.3.1 — 2021-12-03
- 6.3.0 — 2021-11-03
- 6.2.0-alpha.2 — 2021-10-13
- … 88 more at https://npm.io/package/react-native-render-html/versions

## README

<p align="center">
  <div align="center">
    <a href=""
      ><img
        src="https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20MacOs%20%7C%20Windows-brightgreen.svg?colorB=191A17"
        alt="platforms"
    /></a>
    <a href="https://github.com/expo/expo"
      ><img
        src="https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat&amp;logo=EXPO&amp;labelColor=ffffff&amp;logoColor=000"
        alt="runs with expo"
    /></a>
  </div>
  <div align="center">
    <a href="https://www.npmjs.com/package/react-native-render-html"
      ><img
        src="https://img.shields.io/npm/v/react-native-render-html/latest"
        alt="npm"
    /></a>
    <a href="https://www.npmjs.com/package/react-native-render-html"
      ><img
        src="https://img.shields.io/npm/v/react-native-render-html/next"
        alt="npm"
    /></a>
    <a href="https://www.npmjs.com/package/react-native-render-html"
      ><img
        src="https://img.shields.io/npm/dm/react-native-render-html.svg?colorB=007ec6"
        alt="npm"
    /></a>
  </div>
  <div align="center">
    <a href="https://codecov.io/gh/meliorence/react-native-render-html"
      ><img
        src="https://img.shields.io/codecov/c/gh/meliorence/react-native-render-html"
        alt=""
    /></a>
    <a
      href="https://github.com/meliorence/react-native-render-html/actions?query=branch%3Amaster+workflow%3ACI"
      ><img
        src="https://github.com/meliorence/react-native-render-html/workflows/CI/badge.svg?branch=master"
        alt=""
    /></a>
    <a href="https://github.com/meliorence/react-native-render-html/issues"
      ><img
        src="https://img.shields.io/github/issues/meliorence/react-native-render-html.svg"
        alt="github issues"
    /></a>
    <a href="https://semver.org/spec/v2.0.0.html"
      ><img src="https://img.shields.io/badge/semver-2.0.0-e10079.svg" alt=""
    /></a>
  </div>
  <div align="center">
    <a href="https://discord.gg/dbEMMJM"
      ><img
        src="https://img.shields.io/discord/736906960041148476?label=discord"
        alt=""
    /></a>
    <a
      href="https://openbase.com/js/react-native-render-html?utm_source=embedded&amp;utm_medium=badge&amp;utm_campaign=rate-badge"
      ><img
        src="https://badges.openbase.com/js/rating/react-native-render-html.svg"
        alt="Rate on Openbase"
    /></a>
  </div>
</p>
<br/>
<p align="center">
    <a href="https://meliorence.github.io/react-native-render-html/"><img width="124" height="124" src="https://github.com/meliorence/react-native-render-html/raw/master/assets/logo.svg"></a>
</p>
<h1 align="center">react-native-render-html</h1>
<p align="center">
  <sup>Based on the original work of <a href="https://github.com/Thomas101">Thomas Beverley</a>, props to him.</sup>
</p>
<p align="center">
An iOS/Android pure javascript react-native component that renders your HTML into 100% native views.
</p>
<p align="center">
    <a href="https://meliorence.github.io/react-native-render-html/blog/2021/06/27/create-blog-app-rnrh-I"><img width="320" height="744" src="https://github.com/meliorence/react-native-render-html/raw/master/assets/demo.gif"></a>
</p>

### 🗃️ 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](https://meliorence.github.io/react-native-render-html/blog/2021/06/07/foundry-announcement).
We also have a [**migration
guide**](https://meliorence.github.io/react-native-render-html/docs/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                                                                                   | -                                                                                                          | [![npm](https://img.shields.io/npm/v/react-native-render-html/next)](#)        |
| 6.3   | [release/6.3](https://github.com/meliorence/react-native-render-html/tree/release/6.3)   | [Official Website](https://meliorence.github.io/react-native-render-html/)                                 | [![npm](https://img.shields.io/npm/v/react-native-render-html/release/6.3)](#) |
| 5.1   | [release/5.1](https://github.com/meliorence/react-native-render-html/tree/release/5.1)   | [release/5.1/README.md](https://github.com/meliorence/react-native-render-html/blob/release/5.1/README.md) | [![npm](https://img.shields.io/npm/v/react-native-render-html/release/5.1)](#) |
| 4.2   | [release/4.2](https://github.com/meliorence/react-native-render-html/tree/release/4.2)   | [release/4.2/README.md](https://github.com/meliorence/react-native-render-html/blob/release/4.2/README.md) | [![npm](https://img.shields.io/npm/v/react-native-render-html/release/4.2)](#) |

<a name="prereleases"></a>

## :computer: Install

```bash
npm install react-native-render-html
```

```bash
yarn add react-native-render-html
```

## :speedboat: Basic Usage

```jsx
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](https://meliorence.github.io/react-native-render-html/) and [the official Discovery App](https://expo.io/@jsamr/react-native-render-html-discovery).

## :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](https://meliorence.github.io/react-native-render-html/blog/2021/06/27/create-blog-app-rnrh-I).

## :notebook: Changelog

The changelog is available here: [packages/render-html/CHANGELOG.md](https://github.com/meliorence/react-native-render-html/blob/master/packages/render-html/CHANGELOG.md).

## :bulb: Help

Please refer to [our dedicated document](https://github.com/meliorence/react-native-render-html/blob/master/HELP.adoc).

## 👥 Community

You're always welcome to join our [discord channel](https://discord.gg/dbEMMJM) :-).

## :pencil: Contributing

Check-out our [contributing guide](https://github.com/meliorence/react-native-render-html/blob/master/CONTRIBUTING.adoc).

- You can report bugs in [our Issue Tracker](https://github.com/meliorence/react-native-render-html/issues);
- We handle Feature Requests [in our Canny board](https://native-html.canny.io/features).

## :blue_heart: Sponsorship

Want to support this project or hire us to implement a feature? [Check out this page](https://github.com/sponsors/jsamr).

## :balance_scale: License

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

---
_Source: https://npm.io/package/react-native-render-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._