WebView Event Messaging Library for Sites Loaded in a React Native App

This library enables a site to communicate with a React Native app when the site is loaded inside of a web view running inside the app.

The communication between the React Native app and the site occurs over a React Native Bridge which is a bridge which enables communication between JavaScript code and Native language code.

The library is published on npm.

The library has a associated library published on npm. The associated library enables the react native app to communicate back to the site running inside its WebView instances.

Example Usage

reactAppCommunication.js

import { NativeApp } from 'react-native-webview-event-messaging-web'

NativeApp.trigger('HELLO_FROM_SITE_EVENT', { helloMessage: 'hello there!'})

NativeApp.registerHandler('HELLO_FROM_REACT_NATIVE_HEADER', (data) => { console.log(data)})

API

NativeApp.trigger(eventName, data)

NativeApp.trigger sends an event with the event name eventName and an associated data payload (data) to the React Native app which has the site loaded in one it's webView instances.

NativeApp.registerHandler(eventName, handlerFunc)

NativeApp.registerHandler registers a handler function (handlerFunc) to be called when the React Native app sends an event with the name eventName.

handlerFunc takes one parameter data which is the data payload sent with the event.

NativeApp.isRunningInApp()

NativeApp.isRunningInApp() returns a boolean whether the webview is currently running in the native app.

User Agent

The React Native portion of the library alters UserAgent string to use ReactNativeEventMessagingWebView/{APP_VERSION_NAME}. This allows the web page to know that it is running inside a compatible react native app and allows the web page to adapt its behavior for different app versions.