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

Bug description:

I have a <WebView> in my app built using Expo and React Native.

The webview opens a page that uses the Web Share API, i.e. navigator.share({ url: 'url' }).

However, navigator.share is not available inside the webview.

If the same page is opened within a normal browser, sharing works as expected.

To Reproduce:

Call navigator.share from inside a page opened in a webview and see that it’s undefined.

Expected behavior:

navigator.share should be defined and working.

Environment:

• OS: Android
• OS version: 8
• react-native version: "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
• react-native-webview version:

[chihimng]

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);
    }
  }
}, []);

[JKDos]

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