Nocturnal Pumpkin Maelstrom

    react-native-webview-messaging

    1.2.3 • Public • Published

    React Native WebView Messaging

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

    🔥 check out early release of v2

    Demo

    Installation

    npm install react-native-webview-messaging

    Roadmap

    • channel for redux actions
    • enhanced dev environment

    Examples

    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

    Install

    npm i react-native-webview-messaging

    DownloadsWeekly Downloads

    110

    Version

    1.2.3

    License

    MIT

    Last publish

    Collaborators

    • lesnitsky