I'm using a PDF viewer on react-native, some files without : can be opened but other files with : won't open and will return No content provider.

Is there a way to read locally stored files with : on it's name on react-native?

For example, this kind of file path

const filenameWithSpace = 'file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf'

I already tried encodeURIComponent and encodeURI but it didn't work.

Update: The problem on the filename was actually the : character not the spaces.

I'm using a PDF viewer on react-native, some files without : can be opened but other files with : won't open and will return No content provider.

Is there a way to read locally stored files with : on it's name on react-native?

For example, this kind of file path

const filenameWithSpace = 'file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf'

I already tried encodeURIComponent and encodeURI but it didn't work.

Update: The problem on the filename was actually the : character not the spaces.

• javascript
• react-native

• Hey kcNeko, have you tried adding %20 wherever you need a space in the url? – Luay Commented Nov 29, 2018 at 4:18
• which plugin you are using to view pdf files? – Just code Commented Nov 29, 2018 at 4:18
• @GrandIQ I already tried replacing all spaces with %20 don't it didn't do the trick. – kcNeko Commented Nov 29, 2018 at 4:21
• @Justcode I'm working with react-native-pdf :) – kcNeko Commented Nov 29, 2018 at 4:22
• 1 Alright well I tried my best, definitely staring this I want to know how you resolved it! – Luay Commented Nov 29, 2018 at 4:56

4 Answers 4

If space in file uri this will fail.

var base64data = await RNFS.readFile( res.uri, 'base64').then(res => { return res });

Replace with this line

var result = res.uri.split("%20").join("\ ");
var base64data = await RNFS.readFile( result, 'base64').then(res => { return res });

This will work

Have you tried using '\' (backslash)?

Please let me know if this works.

var str = "file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf";
    var result = str.split(" ").join("\ "); // added '\'
    console.log('Result',result);

Snippet copied from answer provided by Vishal Vaghasiya

I wasn't able to explain the whole process of the app.

The return from database has something like this

{file: "//storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf"}

which I use to read with my PDF library. However the actual file that is stored locally has a name of foo foo Nov 21, 2018 121604 PM.pdf

so I have to do this instead

'file://' + file.replace(/:/g, "")

or it can be done like this

'file://' + file.replace(/[|&:;$%@"<>()+,]/g, "")

var str = "file:///storage/emulated/0/somwhere/foo foo Nov 21, 2018 12:16:04 PM.pdf";
        var result = str.split(" ").join("");
        console.log('Result',result);

file:///storage/emulated/0/somwhere/foofooNov21,201812:16:04PM.pdf