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: 5 days 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T17:16:36.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T23:54:16.345Z (7 months 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

[![GitHub stars](https://img.shields.io/github/stars/lesnitsky/react-native-webview-messaging.svg?style=social)](https://github.com/lesnitsky/react-native-webview-messaging)

[![Twitter Follow](https://img.shields.io/twitter/follow/lesnitsky_dev.svg?label=Follow%20me&style=social)](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

[![GitHub stars](https://img.shields.io/github/stars/lesnitsky/react-native-webview-messaging.svg?style=social)](https://github.com/lesnitsky/react-native-webview-messaging)

[![Twitter Follow](https://img.shields.io/twitter/follow/lesnitsky_dev.svg?label=Follow%20me&style=social)](https://twitter.com/lesnitsky_dev)