wonday / react-native-pdf

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

Blank page with spaces in file path #694

Closed scarlac closed 1 year ago

scarlac commented 2 years ago

What react-native version are you using? react-native@0.68.2

What react-native-pdf version are you using? react-native-pdf@6.6.2

What platform does your issue occur on? (android/ios/both) android

Describe your issue as precisely as possible : 1) Have a PDF file locally stored in user space, not bundled with app, e.g. /data/user/0/com.mycompany.myapp/cache/pdfs/somefile name foo bar.pdf 2) Pass the PDF file's (correctly encoded) local file URL as <Pdf source={{ uri: '/data/user/0/com.mycompany.myapp/cache/pdfs/somefile%20name%20foo%20bar.pdf' }} /> 3) Observe that the PDF component is blank and nothing else happens

Join a screenshot or video of the problem on the simulator or device? I can't share a screenshot, sorry.

Show us the code you are using?

import Pdf from 'react-native-pdf';
// ...
const [localFilePath, setLocalFilePath] = useState<string|null>(null);
// ...
setLocalFilePath(`file://${new URL(newPath).pathname}`); // pathname is URL-encoded, e.g. spaces are %20 instead
// ...
return (
  <Pdf
    maxScale={5.0}
    style={{ flexGrow: 1 }}
    source={{ uri: localFilePath }}
  />
);

In logcat, the file path is logged with %20 in the filename, so that's the cause - it's simply not decoding the path correctly (given that it's a URI, it needs to be decoded before turned into a local file path prior to native use it seems).

PR incoming.