https://github.com/whitedogg13/react-native-html5-loader
Mini library to help you easily integrate existing web library into React Native
https://github.com/whitedogg13/react-native-html5-loader
android html5 ios react-native
Last synced: 3 months ago
JSON representation
Mini library to help you easily integrate existing web library into React Native
- Host: GitHub
- URL: https://github.com/whitedogg13/react-native-html5-loader
- Owner: whitedogg13
- Created: 2018-07-31T09:39:17.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-03T05:45:07.000Z (almost 8 years ago)
- Last Synced: 2025-10-20T21:47:22.605Z (9 months ago)
- Topics: android, html5, ios, react-native
- Language: JavaScript
- Homepage:
- Size: 10.7 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-html5-loader
Mini library to help you easily integrate existing web library into React Native!
## Install
npm install --save react-native-html5-loader
## What can it do for you?
This is indeed a mini library, but it offers some good stuff to you:
* Create base HTML template inside Webview, let you easily inject the part you need for customization
* Hook up basic communication channel between the WebView and React Native using the `postMessage`. The message format is redux like: `type` and `payload`, so you won't need to manually stringify or parse anything youself.
* Handle WebView initialization to `avoid the possible race condition between WebView and React Native`, since there're running in their own JS runtime
* You can `write JS function for web directly in your React Native project` (NOTICE: es5 syntax only)
## Example
Please see `examples` directory, we have provided 3 examples for now:
* A simple `Counter` example
* An example to integrate `SignaturePad` js library
* An example to integrate `ThreeJs` to show 3D object
## API Usage
Let's use a simple `Counter` example to explain the usage.
What we want to accomplish is:
* Create the counter UI inside `WebView`
* Increment or decrement the counter value in `React Native` side.
The full code is here, very short and clean:
```javascript
import React, {Component} from 'react';
import {View, Text, TouchableOpacity, WebView} from 'react-native';
import Html5Loader from 'react-native-html5-loader';
export default class App extends Component {
render() {
return (
body { margin:0; padding: 20px; }
h1 { font-size: 100px; }
`}
body={`
0
`}
webHandler={function webHandler(action, callRN, window) {
var count = parseInt(window.document.querySelector('h1').innerHTML, 10);
if (action.type === 'inc') {
window.document.querySelector('h1').innerHTML = (count + 1);
} else if (action.type === 'dec') {
window.document.querySelector('h1').innerHTML = (count - 1);
}
callRN('ack', 'message ' + action.type + ' received')
}}
rnHandler={(action, callWeb) => console.log(action.type, action.payload)}
>
{({callWeb, webViewProps}) => (
callWeb('inc', null)}>
+1
callWeb('dec', null)}>
-1
)}
);
}
}
```
### Props
* **head** (`string`): will be injected into the `` section of WebView HTML.
* **body** (`string`): will be injected into the `` section of WebView HTML.
* **webHandler** (`es5 function`): the code to execute inside Web when receiving message from React Native side. The signature:
* **action**: JS object with format `{type, payload}`
* **callRN**: used to send message back to React Native side. `callRN` also has two positional params `type`(string) and `payload`(any)
* **window**: injected global `window` object for WebView.
* **rnHandler** (`function`): the code to execute inside RN when receiving message from Web side. The signature:
* **action**: JS object with format `{type, payload}`
* **callWeb**: used to send message to web side. `callWeb` also has two positional params `type`(string) and `payload`(any)
### props.children
This library uses `render props pattern` and the `props.children` should be a function returning `JSX`, with a single param which is an object containing following properties:
* **callWeb**: used to send message to web side. `callWeb` also has two positional params `type`(string) and `payload`(any)
* **webViewProps**: calculated props for the actual `WebView`, use spread operator to pass those props to let the magic happen!
## Contributions
Welcome!