Bug: ERROR Class not found On Android (Capacitor 3)

[AdlerJS]

When using on Capacitor 3 for Android I am getting the following error in the logcat console. Line 34005 - Msg: ERROR Class not found

I am using React and Capacitor 3 to implement the plugin which is working as expected on IOS but throws the error above on Android. Below is the custom hook that wraps this plugin.

const useNativeFilePreview = ({ fileId, isVault, workspaceId }) => {
  const [isLoading, setIsLoading] = useState(false);
  const isNative = Capacitor.isNativePlatform();
  const queryClient = useQueryClient();
  const toast = useToast();

  const fileContentArgs = isVault
    ? { queryClient, fileId }
    : { queryClient, fileId, workspaceId };

  const onSuccess = () => {
    setIsLoading(false);
  };

  const onError = (e) => {
    console.log('ERROR', e);
    toast({
      title: 'Error Opening File Note',
      description: 'Any error occured during preview.',
      status: 'error',
      duration: TOAST_DURATION,
      isClosable: true,
    });
    setIsLoading(false);
  };

  const previewNativeFile = async (fileName) => {
    if (isNative && !CACHE[fileName]) {
      setIsLoading(true);
      const fileContent = await downloadFileContents(fileContentArgs);
      const response = await fetch(fileContent);
      const blob = await response.blob();
      const result = await write_blob({
        path: fileName,
        blob: blob,
        directory: Directory.Cache,
      });
      console.log('FILE DL -- WRITE', result);
      CACHE[fileName] = result;
      await window.PreviewAnyFile.previewPath(onSuccess, onError, result);
    } else if (isNative && CACHE[fileName]) {
      await window.PreviewAnyFile.previewPath(
        onSuccess,
        onError,
        CACHE[fileName]
      );
    }
  };

  return { previewNativeFile, isLoading };
};

export default useNativeFilePreview;

I have been unable to trace down where exactly the error is occurring or what is causing it. However I can confirm it happens on the await window.PreviewAnyFile.previewPath(onSuccess, onError, result); line

[AdlerJS]

I was able to solve it right after adding this issue but going to leave the solution below.

Step 1:
Make sure to add the required dependencies. via NPM install

    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",

Step 2:
If using capacitor since the Ionic Native package has not been updated you need to add the following to your android config.xml

    <feature name="PreviewAnyFile">
        <param name="android-package" value="com.mostafa.previewanyfile.PreviewAnyFile"/>
    </feature>

[AdlerJS]

Closing this issue has the solution above should solve it for most users. Hopefully once Ionic Native update gets released the Step 2 will not be required. Thanks for the plugin!

[mostafa-mansour1]

Appreciate your contribution Regards,

…

___________________________ Mostafa Mansour Software Engineer 00971 524988466 On 20 Sep 2021, at 8:09 PM, Dan Adler ***@***.***> wrote:  I was able to solve it right after adding this issue but going to leave the solution below. Step 1: Make sure to add the required dependencies. via NPM install "cordova-plugin-androidx": "^3.0.0", "cordova-plugin-androidx-adapter": "^1.1.3", Step 2: If using capacitor since the Ionic Native package has not been updated you need to add the following to your android config.xml <feature name="PreviewAnyFile"> <param name="android-package" value="com.mostafa.previewanyfile.PreviewAnyFile"/> </feature> — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#36 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABSFOB2ZB5BPQ5HYDGHWRBTUC5MBVANCNFSM5EMIMHAA>. Triage notifications on the go with GitHub Mobile for iOS<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.