@datadog/mobile-react-native-webview/lib/module/index.js

A client-side React Native module to interact with react-native-webview and Datadog

/*
 * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
 * This product includes software developed at Datadog (https://www.datadoghq.com/).
 * Copyright 2016-Present Datadog, Inc.
 */

import { WebView as RNWebView } from 'react-native-webview';
import React, { forwardRef, useCallback, useMemo } from 'react';
import NativeDdLogs from './ext-specs/NativeDdLogs';
import { NativeDdSdk } from './ext-specs/NativeDdSdk';
import { NativeDdWebView } from './specs/NativeDdWebView';
import { wrapJsCodeInTryAndCatch, wrapJsCodeWithAllowedHosts } from './utils/webview-js-utils';
import { jsx as _jsx } from "react/jsx-runtime";
const WebViewComponent = (props, ref) => {
  const userDefinedOnMessage = props.onMessage;
  const onMessage = useCallback(event => {
    const handleDatadogMessage = ddMessage => {
      if (ddMessage.type === 'ERROR' && ddMessage.message != null && (props.logUserCodeErrors ?? false)) {
        NativeDdLogs?.error(ddMessage.message, {});
      } else if (ddMessage.type === 'NATIVE_EVENT' && ddMessage.message != null) {
        NativeDdSdk?.consumeWebviewEvent(ddMessage.message);
      }
    };
    const message = event.nativeEvent.data;
    if (message == null) {
      return;
    }
    try {
      const jsonMsg = JSON.parse(message);
      if (jsonMsg && jsonMsg.source === 'DATADOG') {
        handleDatadogMessage(jsonMsg);
      } else {
        userDefinedOnMessage?.(event);
      }
    } catch (err) {
      userDefinedOnMessage?.(event);
    }
  }, [userDefinedOnMessage, props.logUserCodeErrors]);
  const injectedJavascript = useMemo(() => {
    return wrapJsCodeInTryAndCatch(props.injectedJavaScript);
  }, [props.injectedJavaScript]);
  const injectedJavascriptBeforeContentLoaded = useMemo(() => {
    return wrapJsCodeWithAllowedHosts(props.injectedJavaScriptBeforeContentLoaded, props.allowedHosts);
  }, [props.injectedJavaScriptBeforeContentLoaded, props.allowedHosts]);
  return /*#__PURE__*/_jsx(RNWebView, {
    ...props,
    onMessage: onMessage,
    nativeConfig: {
      component: NativeDdWebView,
      props: {
        allowedHosts: props.allowedHosts
      }
    },
    injectedJavaScript: injectedJavascript,
    injectedJavaScriptBeforeContentLoaded: injectedJavascriptBeforeContentLoaded,
    ref: ref
  });
};
export const WebView = /*#__PURE__*/forwardRef(WebViewComponent);

// eslint-disable-next-line import/no-default-export
export default WebView;
//# sourceMappingURL=index.js.map