navigator.share (Web Share API) is not working inside a Webview

Solution by overriding navigator.share() to forward param to react native side for handling:

1. Inject js before content loaded

// pass this in WebView injectedJavaScriptBeforeContentLoaded props
const injectedJavaScriptBeforeContentLoaded = `
if (navigator.share == null) {
  navigator.share = (param) => {
     window.ReactNativeWebView.postMessage('share:' + JSON.stringify(param));
  };
};
true;
`;

1. Add onMessage callback to handle passed params, call react native’s Share to invoke native share sheet

import { Share } from "react-native"

interface WebShareAPIParam {
  // ref https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
  url?: string;
  text?: string;
  title?: string;
  // files unhandled
}

// pass this in WebView onMessage props
const onMessage = useCallback(async (e: WebViewMessageEvent) => {
  const {data} = e.nativeEvent;
  if (data.startsWith('share:')) {
    try {
      const param: WebShareAPIParam = JSON.parse(data.slice('share:'.length));
      if (param.url == null && param.text == null) {
        return;
      }
      await Share.share(
        {
          title: param.title,
          message: [param.text, param.url].filter(Boolean).join(' '), // join text and url if both exists
          url: param.url,
        },
        {
          dialogTitle: param.title,
          subject: param.title,
        },
      );
    } catch (e: unknown) {
      console.error(e);
    }
  }
}, []);

Still an issue in 2022. Did anyone find a solution not involving Java or Koplin?