Introduction
#
Should I use?#
Yes!HTML markup is translated into React Native views. See the โArchitecture page for more details.
Its design balances compliance to HTML and CSS standards with lightweightness, despite some limitations and caveats.
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.
#
NoIf your use-case is pretty straightforward, you might implement โyour own, lightweight HTML renderer.
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.
#
SynthesisThe 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.
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).
You should probably not use this library if you need to render arbitrary, unpredictable content.
#
InstallInstall react-native-render-html
Foundry release (v6) on your project:
#
Simple UsageLet's start with a simple example:
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.