React Native WebView Messaging

React Native WebView extension with 2-way event-based communication API

:fire: check out early release of v2

• Installation
• Roadmap
• Usage
  • React Native View
  • WebView
• API Docs
  • WebView
    • send(text: String)
    • sendJSON(json: Object)
    • emit(eventName: String, [eventData: Object])
    • messagesChannel: EventEmitter
  • RNMessagesChannel
    • send(text: String)
    • sendJSON(json: Object)
    • emit(eventName: String, [eventData: Object])

Installation

npm install react-native-webview-messaging

Roadmap

• channel for redux actions
• enhanced dev environment

Examples

• Expo SDK
• React Native

React Native view

import React, { Component } from 'react';
import { View, TouchableHighlight } from 'react-native';
import { WebView } from 'react-native-webview-messaging/WebView';

export class ExampleView extends Component {
  render() {
    return (
      <View>
        <WebView
          ref={ webview => { this.webview = webview; }}
          source={ require('./some-page.html') }
        />
        <TouchableHighlight onPress={this.sendMessageToWebView} underlayColor='transparent'>
          <Text>Send message to WebView</Text>
        </TouchableHighlight>
      </View>
    )
  }

  componentDidMount() {
    this.webview.messagesChannel.on('text', text => console.log(text));
    this.webview.messagesChannel.on('json', json => console.log(json));
    this.webview.messagesChannel.on('custom-event-from-webview', eventData => console.log(eventData));
  }

  sendMessageToWebView = () => {
    this.webview.sendJSON({
      payload: 'JSON from RN'
    });

    this.webview.send('plain text from RN');

    this.webview.emit('custom-event-from-rn', { payload: 'Custom event from RN' });
  }
}

WebView

import RNMsgChannel from 'react-native-webview-messaging';

RNMsgChannel.on('text', text => console.log(text));
RNMsgChannel.on('json', json => console.log(json));
RNMsgChannel.on('custom-event-from-rn', data => console.log(data));

RNMsgChannel.send('plain text from WebView');
RNMsgChannel.sendJSON({
  payload: 'JSON from WebView'
});

RNMsgChannel.emit('custom-event-from-webview', { payload: 'Custom event from WebView' });

API Docs

WebView

extends WebView from react-native

Import

// es6 modules
import { WebView } from 'react-native-webview-messaging/WebView';
// commonJS
const { WebView } = require('react-native-webview-messaging/WebView');

WebView#send(text: String)

Emits 'text' event on RNMessagesChannel inside WebView

WebView#sendJSON(json: Object)

Emits 'json' event on RNMessagesChannel inside WebView

WebView#emit(eventName: String, [eventData: Object])

Emits custom event on RNMessagesChannel inside WebView

messagesChannel: EventEmitter

Emits events sent from WebView

• 'text' - emitted when RNMessagesChannel#send(text: String) is called in WebView
• 'json' - emitted when RNMessagesChannel#sendJSON(json: Object) is called in WebView
• you can also emit custom events with RNMessagesChannel#emit(eventName: String, [eventData: Object]) method

RNMessagesChannel

extends EventEmitter

Emits events sent from RN app

• 'text' - emitted when WebView#send(text: String) is called in RN app
• 'json' - emitted when WebView#sendJSON(json: Object) is called in RN app
• you can also emit custom events with WebView#emit(eventName: String, [eventData: Object]) method

RNMessagesChannel#send(text: String)

Emits 'text' event to WebView#messagesChannel in RN app

RNMessagesChannel#sendJSON(json: Object)

Emits 'json' event to WebView#messagesChannel in RN app

RNMessagesChannel#emit(eventName: String, [eventData: Object])

Emits custom event to WebView#messagesChannel in RN app

Import

// es6 modules
import RNMessagesChannel from 'react-native-webview-messaging';
// commonJS
const RNMessagesChannel = require('react-native-webview-messaging');

LICENSE

MIT