Table of Contents

• WebApiBridge
  • apis
  • target
  • useReactNativeWebView
  • listener
  • origin
  • targetOrigin
  • onMessage
    • Parameters
  • send
    • Parameters

WebApiBridge

WebApiBridge provides a function call API interface between Javascript processes that pass MessageEvent objects such as a a web page and an iframe or a React Native application and a web app running in a react-native-webview.

apis

Property of the api objects that contain methods for incoming api function calls. This is an array of objects so that a single WebViewApi can have multiple APIs. The first API with a function is used if the function exists in more than one API.

target

Property for target object to post messages to the other side. Typically the window, or a window.parent for an iframe in a normal web page. For the WebView component on the React Native side use the ref, and for the web side of react-native-webview use window.parent for iOS and window for Android.

useReactNativeWebView

Property that should be truthy for a webview using react-native-webview. When set target.ReactNativeWebView.postMessage will be used instead of target.postMessage.

listener

Property that can be set to a function that can monitor all Message objects exchanged between WebApiBridge objects.

origin

Property for validating the origin of received messages. The property is set to a substring of the origin to be matched in browser windows. This makes it easy to provide some checking in development mode, for example, ':3000' will allow messages from any server using port 3000. By default it’s set to '', which will allow messages from any origin. This property should be set as restrictively as possible. e.g. 'https://www.mydomain.com:3000'. Note that his property is irrelevant in React Native WebViews.

targetOrigin

Property for specifying the origin of the target window in messages sent to browser windows. By default it’s set to '*', which will allow messages to any document. This property should be set as restrictrively as possible. e.g. 'https://www.mydomain.com:3000'. Note that his property is irrelevant in React Native WebViews.

onMessage

Function that should get called when an event containing a message is received from the other side.

Parameters

• event object Incomming event.
• data string The incoming data received, which is a stingified JSON message. Defaults to event.nativeEvent.data, which is correct for React Native but needs to be overridden for web apps with event.data. (optional, default event.nativeEvent.data)

send

Invoke a function on the remote.

Parameters

• targetFunc string A string of the name of the api function to execute.
• args Array An array of parameters to be passsed to the targetFun.
• wantResult boolean Boolean to indicate if a Promise should be fullfilled or rejected after the remote api completes the call. If false then no Promise will be fullfilled. (optional, default false)

Returns Promise if wantResult is true, void if not.