rnw

react-native-webview-messaging

✉️ Send/Receive data between React Native app and WebView

Showing:

Popularity

Downloads/wk

15

GitHub Stars

256

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

React Native WebView Messaging

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

GitHub stars Twitter Follow

⚠️ 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

GitHub stars Twitter Follow

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial