<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&logo=EXPO&labelColor=ffffff&logoColor=000"
alt="runs with expo"
/></a><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><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><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&utm_medium=badge&utm_campaign=rate-badge"
><img
src="https://badges.openbase.com/js/rating/react-native-render-html.svg"
alt="Rate on Openbase"
/></a><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>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.
<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>🗃️ 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-htmlyarn 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}
/>
);
}:bluebook: 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.
