Introduction

Should I use?

Yes!

1. HTML markup is translated into React Native views. See the ​Architecture page for more details.

2. Its design balances compliance to HTML and CSS standards with lightweightness, despite some limitations and caveats.

3. It aims at being extremely customizable. For example, you can ​define custom renderers targetting specific tags with a mean to define children rendering, provide ​styles for tags, classes and ids, and ​tamper with the DOM.

No

1. If your use-case is pretty straightforward, you might implement ​your own, lightweight HTML renderer.

2. This is not a Web engine! If you need to load JavaScript along, or you need all features of the Web standards, you should use ​react-native-webview instead. Beware that it will certainly have a bigger impact on your App's performances, since it will use the system's Web View.

Synthesis

1. The best use case for library is when the content to render is predictable (e.g. you know in advance the tags and classes to support), such as rendering content from a CMS, or via API endpoints.

2. You might also benefit from this library if you need to render sections of a web page such as articles which content is reasonably predictable, (see ​Root Selection to select an element of the DOM to render).

3. You should probably not use this library if you need to render arbitrary, unpredictable content.

Install

Install @native-html/render Foundry release (v6) on your project:

npm install --save-prod @native-html/render

Simple Usage

Let's start with a simple example:

Minimal working example

JSX Source

<p style='text-align:center;'>

Hello World!

</p>

HTML Snippet

import React from 'react';

import { useWindowDimensions } from 'react-native';

import RenderHtml from '@native-html/render';

const source = {

html: `

<p style='text-align:center;'>

Hello World!

</p>`

};

export default function App() {

const { width } = useWindowDimensions();

return (

<RenderHtml

contentWidth={width}

source={source}

/>

);

}

TRT Snapshot

<TDocument tagName="html">

<TBlock tagName="body">

<TBlock tagName="p">

<TPhrasing anonymous>

<TText anonymous data="Hello World!" />

</TPhrasing>

</TBlock>

</TBlock>

</TDocument>

This example shows the rendering of simple HTML code snippet.

Press on the button below to show how this code renders on your device.

tip

Press the Run on Your Device with Expo button to try it out on your device, and change the HTML from the Expo editor.

tip

Inspect the pre-render tree representation with the TRT Snapshot tab.

The ​source prop specifies the HTML content to load. This prop also supports an uri field for remote loading and a dom field for asynchronous DOM pre-processing (see ​Prerendering).

important

The ​contentWidth prop allows proper image scaling. See ​Images page for more details.