react-native-display-html
Advanced tools
Readme
Display HTML content in an automatically sized webview and eases javascript injection inside it. Pull requests are very welcome!
The motivation behind this is to stop parsing HTML to render it as native components. It might work on simple HTML when you have the freedom of tweaking it, but on much more complex HTML... it's just not possible yet. Don't even get me started on platform's specific rendering issues (don't you ever render an image inside a text component on Android !).
We gave up, so here's react-native-display-html.
$ 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.
...
render () {
return (
<DisplayHTML
htmlString={'<p>Hello there !</p><img src="http://placehold.it/500x1000" />'}
HTMLStyles={'body { background-color:lightblue }'}
/>
);
}
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 | '' |
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 !
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.
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.
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.
This plugin ships with typescript definitions. Feel free to improve these declarations and open a pull request if you're a ts lover.
Written by Maxime Bertonnier at Archriss.
FAQs
Display HTML content in an automatically sized webview and eases javascript injection inside it.
The npm package react-native-display-html receives a total of 11 weekly downloads. As such, react-native-display-html popularity was classified as not popular.
We found that react-native-display-html demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.