React Native

Send and receive journey events through a WebView bridge in React Native.

There is no separate native SDK or bridge shipped by Cover Genius for React Native. You relay the same JSON envelope described on the main Messaging page through react-native-webview's standard onMessage/injectedJavaScript mechanism.

This page shows the CG specific envelope and events; for the underlying bridge mechanism itself, see the official react-native-webview guide: Communicating between JS and Native.

Prerequisites

react-native-webview (or an equivalent WebView wrapper) installed and rendering the journey URL.

Receiving events from the journey

Inject a script that forwards window.postMessage calls to React Native's onMessage, and handle them in onMessage:

import React, { useRef } from 'react';
import WebView from 'react-native-webview';

const BRIDGE_SCRIPT = `
  window.addEventListener('message', function(event) {
    if (event.data && event.data.source === 'xcover-journeys') {
      window.ReactNativeWebView.postMessage(JSON.stringify(event.data));
    }
  });
  true;
`;

export function JourneyScreen() {
  const webViewRef = useRef<WebView>(null);

  const handleMessage = (event: { nativeEvent: { data: string } }) => {
    const { type, payload } = JSON.parse(event.nativeEvent.data);

    switch (type) {
      case 'CG_JOURNEY_READY':
        console.log('Journey mounted and ready');
        break;
      case 'CG_JOURNEY_COMPLETE':
        console.log('Journey finished:', payload.outcome, payload.policy_id);
        break;
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: 'https://xcj.xcover.com/acme-travel/en/?country=AU' }}
      injectedJavaScript={BRIDGE_SCRIPT}
      onMessage={handleMessage}
    />
  );
}

Sending events into the journey

Use injectJavaScript on the WebView ref to dispatch a message event the journey's listener picks up:

function sendToJourney(webViewRef: React.RefObject<WebView>, type: string, payload: object = {}) {
  const js = `
    window.postMessage({ source: 'xcover-journeys', type: '${type}', payload: ${JSON.stringify(payload)} }, '*');
    true;
  `;
  webViewRef.current?.injectJavaScript(js);
}

// Example: ask the journey to hide itself
sendToJourney(webViewRef, 'CG_JOURNEY_HIDE');

Origin and security notes

The journey's own trusted-origin validation is designed for browser postMessage traffic (checked against event.origin).

Inside a React Native WebView bridge, the risk model shifts instead to this: only your injected bridge script can call ReactNativeWebView.postMessage, and only code running inside the loaded page (the journey itself) can trigger it.

Load only the journey URL provided for your integration, and avoid attaching this bridge to a WebView that can navigate to arbitrary or user-supplied URLs.