Skip to content
✉️ Send/Receive data between React Native app and WebView
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples [EXAMPLE] update react-native and webview side code version Mar 23, 2018
src
.babelrc adopt build for v2 Jan 20, 2018
.editorconfig 🐣 initial commit Jun 1, 2017
.gitignore 🐣 initial commit Jun 1, 2017
.travis.yml 🔧 update .travis.yml Jan 20, 2018
LICENSE.md add license Jun 1, 2017
README.md update examples link Jan 20, 2018
issue_template.md Create issue_template.md Mar 23, 2018
package-lock.json 💀 drop yarn Jan 16, 2018
package.json [EXAMPLE] exit back to root folder after exmaples build Jan 20, 2018
webpack.config.js [EXAMPLE] drop react-native example Jan 20, 2018

README.md

React Native WebView Messaging

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

⚠️ this is v2 branch which is not yet stable. Check out v1 branch for v1 docs

Installation

npm install react-native-webview-messaging@next

Examples

Examples

Usage

React Native

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 (
      <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>
    )
  }

  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

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

You can’t perform that action at this time.