https://github.com/lesnitsky/react-native-webview-messaging
✉️ Send/Receive data between React Native app and WebView
https://github.com/lesnitsky/react-native-webview-messaging
communication event messaging-api react-native webview
Last synced: 12 months ago
JSON representation
✉️ Send/Receive data between React Native app and WebView
- Host: GitHub
- URL: https://github.com/lesnitsky/react-native-webview-messaging
- Owner: lesnitsky
- License: mit
- Created: 2017-06-01T11:00:03.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T17:16:36.000Z (over 3 years ago)
- Last Synced: 2024-04-13T23:54:16.345Z (almost 2 years ago)
- Topics: communication, event, messaging-api, react-native, webview
- Language: JavaScript
- Homepage:
- Size: 1.71 MB
- Stars: 265
- Watchers: 6
- Forks: 32
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Native WebView Messaging
React Native WebView extension with 2-way event-based communication API
[](https://github.com/lesnitsky/react-native-webview-messaging)
[](https://twitter.com/lesnitsky_dev)
:warning: this is v2 branch which is not yet stable. Check out [v1 branch](https://github.com/R1ZZU/react-native-webview-messaging/tree/v1) for v1 docs
## Installation
```sh
npm install react-native-webview-messaging@next
```
## Examples
[Examples](https://github.com/R1ZZU/react-native-webview-messaging/tree/master/examples)
## Usage
### React Native
```javascript
import React, { Component } from 'react';
import { View, TouchableHighlight } from 'react-native';
import { connectToRemote, WebView } from 'react-native-webview-messaging';
export class ExampleView extends Component {
render() {
return (
{ this.webview = webview; }}
source={ require('./some-page.html') }
/>
Send message to WebView
)
}
async componentDidMount() {
this.remote = await connectToRemote(this.webview);
this.remote.on('text', text => console.log(text));
this.remote.on('json', json => console.log(json));
this.remote.on('custom-event-from-webview', eventData => console.log(eventData));
}
sendMessageToWebView = () => {
this.remote.sendJSON({
payload: 'JSON from RN'
});
this.remote.send('plain text from RN');
this.remote.emit('custom-event-from-rn', { payload: 'Custom event from RN' });
}
}
```
### Web
```javascript
import { connectToRemote } from 'react-native-webview-messaging/web';
connectToRemote()
.then(remote => {
remote.on('text', text => console.log(text));
remote.on('json', json => console.log(json));
remote.on('custom-event-from-rn', data => console.log(data));
remote.send('plain text from WebView');
remote.sendJSON({
payload: 'JSON from WebView'
});
remote.emit('custom-event-from-webview', { payload: 'Custom event from WebView' });
});
```
## LICENSE
MIT
[](https://github.com/lesnitsky/react-native-webview-messaging)
[](https://twitter.com/lesnitsky_dev)