wonday / react-native-pdf

A <Pdf /> component for react-native
MIT License
1.58k stars 540 forks source link

[Android]: Cannot create URL for blob! #723

Open jakobsuckow opened 1 year ago

jakobsuckow commented 1 year ago

What react-native version are you using? 0.64.3, I am also using expo What react-native-pdf version are you using? 6.5.0 What platform does your issue occur on? (android/ios/both) android only Describe your issue as precisely as possible : I am downloading the PDF via a hook that returns a blob. The blob is constructed correctly (as the PDF Renders on iOS). This is how the blob looks on android {"_data":{"size":11609800,"offset":0,"blobId":"992147c5-e604-47dd-a289-01dd7b4db733","__collector":{}}}

This is how the blob looks on iOS {"_data":{"size":11609800,"offset":0,"blobId":"C6E13931-4AC3-449B-AC07-D6CFC305B355","type":"image/pdf","name":"test.pdf","__collector":{}}}

On Android I am getting an error at the function URL.createObjectURL(data). It throws:

"Cannot create URL for blob!"

1) Steps to reproduce the issue or to explain in which case you get the issue 2) Interesting logs

Join a screenshot or video of the problem on the simulator or device?

Show us the code you are using?

Const PDFScreeen = (props: Props) => {
  const { navigation } = props;

  const [header, setHeader] = React.useState(true);

  const { data, error } = usePDFSedcard();

  const { showAlert } = useAlert();

  const { auth } = useAuth();

  if (!data) return <GlobalLoader />;
  else {
    const source: Source = {
      cache: true,
      uri: URL.createObjectURL(data),
    };

    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Pdf
          onPageSingleTap={() => {
            setHeader(!header);
          }}
          source={source}
          onError={error => {
            console.log(error);
          }}
          onPressLink={uri => {
            console.log(`Link pressed: ${uri}`);
          }}
          style={{ flex: 1, width, height, backgroundColor: DarkBlue }}
        />
      </SafeAreaView>
    );
  }
};

The data is fetched as follows:


const fetchPDF = async (token: string): Promise<Blob> => {
  const res = await fetch(`${base}/pdf/download/`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }).catch(err => {
    throw err;
  });

  if (!res.ok) {
    console.log("Res not okay at usePDF");
  }

  const blob = await res.blob();

  return blob;
};
jakobsuckow commented 1 year ago

Here are my dependencies:


 "dependencies": {
    "@config-plugins/react-native-blob-util": "^2.0.0",
    "@config-plugins/react-native-pdf": "^2.0.0",
    "expo": "^44.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-blob-util": "^0.16.0",
    "react-native-pdf": "^6.5.0",
...
  },
vigneshkumaran-github commented 7 months ago

Same problem I'm getting stream type of data from api but can't convert into url