Skip to main content

React Native Installation

Integrate the Asurion Widget into your React Native application using a WebView. This approach loads the web widget inside a native WebView component, providing a seamless experience across platforms.

Prerequisites​

  • React Native 0.60 or higher
  • iOS 11+ / Android 5.0+

Installation​

Install the react-native-webview package:

npm install react-native-webview

For iOS, install the native dependencies:

cd ios && pod install

Basic Usage​

Create a component that renders the widget inside a WebView:

import React from 'react';
import { View, StyleSheet, Linking } from 'react-native';
import { WebView } from 'react-native-webview';

const WIDGET_ID = '<WIDGET_ID>';
const CONTEXT = { userId: 'user-123', platform: 'ios' };
const TRACKING_PARAMETERS = { utm_source: 'mobile-app', utm_medium: 'webview' };

const widgetHtml = `
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
      * { margin: 0; padding: 0; }
      html, body { height: 100%; width: 100%; overflow: hidden; }
    </style>
    <script>
      (function (w, d, s, o, f, a, js, fjs) {
        w[o] = function () {
          const [action, ...params] = arguments;
          (w[o].q = w[o].q || []).push([action, ...params]);
        };
        (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
        js.id = o;
        js.src = f;
        js.async = 1;
        js.setAttribute('data-widget-id', a.id);
        js.setAttribute('data-variant', a.variant);
        w[o + '_context'] = a.context;
        w[o + '_trackingParameters'] = a.trackingParameters;
        fjs.parentNode.insertBefore(js, fjs);

        // Forward widget events to React Native
        w[o]('subscribe', 'state', function (state) {
          window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'state', payload: state }));
        });
        w[o]('subscribe', 'options', function (options) {
          window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'options', payload: options }));
        });
      })(
        window,
        document,
        'script',
        '_asurion_widget',
        'https://app.widget-loader.service-initiation.asurion.com/widget-loader.js',
        {
          id: '${WIDGET_ID}',
          variant: 'embedded',
          context: ${JSON.stringify(CONTEXT)},
          trackingParameters: ${JSON.stringify(TRACKING_PARAMETERS)},
        }
      );
    </script>
  </head>
  <body></body>
</html>
`;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
    backgroundColor: 'transparent',
  },
});

export function AsurionWidget() {
  const handleOpenWindow = (event: { nativeEvent: { targetUrl: string } }) => {
    Linking.openURL(event.nativeEvent.targetUrl);
  };

  return (
    <View style={styles.container}>
      <WebView
        source={{ html: widgetHtml }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        originWhitelist={['*']}
        allowsInlineMediaPlayback={true}
        onOpenWindow={handleOpenWindow}
      />
    </View>
  );
}

Configuration Options​

OptionTypeRequiredDescription
idstringtrueYour unique widget identifier provided by Asurion
variantstringtrueWidget variant type. For React Native, only 'embedded' is supported
contextobjectfalseAdditional context data to pass to the widget. Can contain any key-value pairs
trackingParametersobjectfalseTracking parameters that will be appended to external links within the widget. Must be string key-value pairs

Communicating with the Widget​

You can send commands to the widget using the injectJavaScript method:

export function AsurionWidget() {
  const webviewRef = useRef<WebView>(null);

  // ...

  const extendContext = (data: Record<string, unknown>) => {
    webviewRef.current?.injectJavaScript(`
      window._asurion_widget('extendContext', ${JSON.stringify(data)});
      true;
    `);
  };

  const extendTrackingParameters = (params: Record<string, string>) => {
    webviewRef.current?.injectJavaScript(`
      window._asurion_widget('extendTrackingParameters', ${JSON.stringify(params)});
      true;
    `);
  };

  return (
    <View style={styles.container}>
      <WebView
        ref={webviewRef}
        source={{ html: widgetHtml }}
        {/* ... other props ... */}
      />
    </View>
  );
}

Subscribing to Widget Events​

The widget forwards events to React Native using postMessage (configured in Basic Usage above). Handle these events using the onMessage prop:

export function AsurionWidget() {
  const webviewRef = useRef<WebView>(null);

  // ...

  const handleMessage = (event: WebViewMessageEvent) => {
    const message = JSON.parse(event.nativeEvent.data);

    switch (message.type) {
      case 'state':
        console.log('Widget state:', message.payload);
        break;
      case 'options':
        console.log('Widget options:', message.payload);
        break;
    }
  };

  return (
    <View style={styles.container}>
      <WebView
        ref={webviewRef}
        source={{ html: widgetHtml }}
        onMessage={handleMessage}
        {/* ... other props ... */}
      />
    </View>
  );
}