expo-sharing isAvailableAsync returns true on chrome 90.0.4430.93 even though it's not available

Summary

When using expo-sharing on chrome 90.0.4430.93 the isAbailableAsync check returns true even though the navigator.share functionality doesn’t work and raises an error. Looking at the ExpoSharing.web.ts code, it looks like chrome recently added the navigator.canShare api which should be used together with checking navigator.share exists.

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Web

SDK Version (managed workflow only)

4.4.3

Environment

Expo CLI 4.4.3 environment info: System: OS: Windows 10 10.0.19041 Binaries: Node: 14.16.1 - C:\Program Files\nodejs\node.EXE npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD IDEs: Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5900203 npmPackages: expo: ~41.0.1 => 41.0.1 react: 16.13.1 => 16.13.1 react-dom: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 react-native-web: ~0.13.12 => 0.13.18 Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

Follow the sharing tutorial in https://docs.expo.io/tutorial/sharing/ Instead of showing an alert message when running on chrome, an exception screen appears:

Unhandled Rejection (TypeError): Failed to execute ‘share’ on ‘Navigator’: Invalid URL

[masseyB]

bump

[KonradLinkowski]

The problem is not with isAvailableAsync, but with shareAsync which tries to share base64. It should probably convert it to a blob first as suggested here: https://stackoverflow.com/a/63948598/5089567

This works for me:

  if (Platform.OS === 'web') {
      const byteString = atob((selectedImage as string).split(',')[1]);
      const ab = new ArrayBuffer(byteString.length);
      const ia = new Uint8Array(ab);

      for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
      }
      const blob = new Blob([ab], { type: 'image/jpeg' });
      const file = new File([blob], 'fileName.png', { type: blob.type });
      navigator.share({
        files: [file],
      } as any)
    } else {
      await shareAsync(selectedImage!);
    } 
  };

Web Share API specification doesn’t say anything about options and current expo-share for web disallows sharing text. If someone will be interested in fixing the code here is the broken file: https://github.com/expo/expo/blob/master/packages/expo-sharing/src/ExpoSharing.web.ts