react-native-display-html
Display HTML content in an automatically sized webview and eases javascript injection inside it. Pull requests are very welcome!
This module isn't maintained anymore :(
The original reason we created this plugin was because no react-native plugin could handle complex HTML without breaking the rendering because of iOS and Android differences. Here, at @archriss we've spent quite some time working on this problem and released react-native-render-html, a plugin that renders your HTML snippets into 100% native views without breaking a sweat. You should check it out if you want to improve the performance of your apps !
Contributors wanted
Soon, this plugin won't be used in any of our production apps. This means we've stopped maintaining it. If you're still using it and need to keep it updated, please open pull requests, we'll keep merging them.
Table of contents
Installation
$ npm install --save react-native-display-html You also need to link react-native-webview-bridge as native dependency. Check the README here (you don't have to add the package manually, it will be installed by react-native-display-html in your node_modules folder).
We will continue relying on it until the
Webviewcomponent backed into react-native's core is stable enough for our needs.
Usage
... render () { return ( <DisplayHTML htmlString={'<p>Hello there !</p><img src="http://placehold.it/500x1000" />'} HTMLStyles={'body { background-color:lightblue }'} /> ); }Props
In addition to these props, you can provide any prop from the Webview component except for
injectedJavaScript,sourceandonMessagewhich are handled in a specific way.
| Prop | Description | Type | Default |
|---|---|---|---|
| htmlString | HTML to display (doctype & <body> not needed) | string | Required |
| onMessage | Function called when webview sent data from window.WebViewBridge.send | func | |
| additionalScripts | Array of functions to be injected in webview | array | |
| title | Title of the page for easier debugging | string | react-native-display-html-${Date.now()} |
| style | Style of the webview component | Webview style object | {flex: 1} |
| containerStyle | Style the container wrapping the webview | View style object | {} |
| HTMLStyles | CSS style to be injected | string | |
| defaultHeight | Webview's height before it's updated | number | 100 |
| additionalHeight | Add some height to the webview once it's calculated | number | 0 |
| bodyClass | Add some height to the webview once it's calculated | string | '' |
Tips and tricks
Injecting javascript
Instead of sending plain strings as in React Native's core Webview component, you can now directly send functions. Just make an array of all the functions you need to inject, and react-native-display-html will handle the heavy-lifting by itself by stringify-ing your functions and adding closures, ez pz.
Using an array might allow you to inject javascript only on some devices that could need it with ease.
Note : you need to write them in ES5, as they won't be transpiled !
Sending data from webview to react-native
You can send data by using window.WebViewBridge.send from the webview's javascript. You should use it in your injected code. For a demo of how it's working, check out the heightScript method of this component. The best way to send objects is to stringify them and parse them back in your onMessage prop.
For instance, this is a great way to implement specific actions on links. We had to rewrite an old hybrid application with react-native and keep the HTML of every article which contained a lot of data-action. Some opening maps, articles, webviews...
We could easily add these functionalities back thanks to this component.
Fonts
This is a bit tricky and doesn't work for now on Android < 4.4. You need the allowUniversalAccessFromFileURLs and allowFileAccess props to be set to true on your DisplayHTML component. Then, in your HTMLStyles prop, you can declare a font with url("/pathtoyourfont.ttf") for iOS and url("file:///android_asset/pathtoyourfont.ttf") on Android.
Note : Be sure to have your fonts inside your XCode and Android projects.
Debugging
You can debug your webview just as you would inspect a regular web page on iOS. Just open Safari and go to Development/Your Device/Title of your component. This way, you can check your console logs you injected, or work on your HTML/CSS.
TypeScript
This plugin ships with typescript definitions. Feel free to improve these declarations and open a pull request if you're a ts lover.
TODO
- Use the webview from React Native's core instead of react-native-webview-bridge
Credits
Written by Maxime Bertonnier at Archriss.
