react-native-pdf icon indicating copy to clipboard operation
react-native-pdf copied to clipboard

[Android]: Cannot create URL for blob!

Open jakobsuckow opened this issue 2 years ago • 2 comments

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 avatar Apr 04 '23 09:04 jakobsuckow

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",
...
  },

jakobsuckow avatar Apr 04 '23 12:04 jakobsuckow

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

vigneshkumaran-github avatar Feb 06 '24 07:02 vigneshkumaran-github