React Native How to open Local File URL using Linking

I’m using the following code to download a file (can be a PDF or a DOC) and then opening it using Linking.

const { dirs } = RNFetchBlob.fs;
let config = {
    fileCache : true,
    appendExt : extension,
    addAndroidDownloads : {
        useDownloadManager : false,
        notification : false,
        title : 'File',
        description : 'A file.',
        path: `${dirs.DownloadDir}/file.${extension}`,
    },
};
RNFetchBlob.config(config)
    .fetch(
        method,
        remoteUrl,
        APIHelpers.getDefaultHeaders()
    )
    .then((res) => {
        let status = res.info().status;
        if (status == 200) {
            Linking.canOpenURL(res.path())
                .then((supported) => {
                    if (!supported) {
                        alert('Can\'t handle url: ' + res.path());
                    } else {
                        Linking.openURL(res.path())
                            .catch((err) => alert('An error occurred while opening the file. ' + err));
                    }
                })
                .catch((err) => alert('The file cannot be opened. ' + err));
        } else {
            alert('File was not found.')
        }
    })
    .catch((errorMessage, statusCode) => {
        alert('There was some error while downloading the file. ' + errorMessage);
    });

However, I’m getting the following error:

An error occurred while opening the file. Error: Unable to open URL: file:///Users/abhishekpokhriyal/Library/Developer/CoreSimulator/Devices/3E2A9C16-0222-40A6-8C1C-EC174B6EE9E8/data/Containers/Data/Application/A37B9D69-583D-4DC8-94B2-0F4AF8272310/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_o259xexg7axbwq3fh6f4.pdf

I need to implement the solution for both iOS and Android.


Posted

in

by

Comments

One response to “React Native How to open Local File URL using Linking”

  1. No Fault Avatar
    No Fault

    Finally did this by replacing Linking by the package react-native-file-viewer.

    In APIHelpers.js:

    async getRemoteFile(filePath, extension, method = ‘GET’) {
    const remoteUrl = `${API_BASE_URL}/${encodeURIComponent(filePath)}`;
    const { dirs } = RNFetchBlob.fs;
    let config = {
    fileCache : true,
    appendExt : extension,
    addAndroidDownloads : {
    useDownloadManager : false,
    notification : false,
    title : ‘File’,
    description : ‘A file.’,
    path: `${dirs.DownloadDir}/file.${extension}`,
    },
    };

    return new Promise(async (next, error) => {
    try {
    let response = await RNFetchBlob.config(config)
    .fetch(
    method,
    remoteUrl,
    this.getDefaultHeaders()
    );
    next(response);
    } catch (err) {
    error(err);
    }
    });
    }
    In my Actions.js

    export function openDocument(docPath, ext) {
    return async (dispatch) => {
    dispatch(fetchingFile());
    APIHelpers.getRemoteFile(docPath, ext).then(async function(response) {
    dispatch(successFetchingFile());
    let status = response.info().status;
    if (status == 200) {
    const path = response.path();
    setTimeout(() => {
    FileViewer.open(path, {
    showOpenWithDialog: true,
    showAppsSuggestions: true,
    })
    .catch(error => {
    dispatch(errorOpeningFile(error));
    });
    }, 100);
    } else {
    dispatch(invalidFile());
    }
    }).catch(function(err) {
    dispatch(errorFetchingFile(err));
    });
    }
    }
    In my Screen.js

    import { openDocument } from ‘path/to/Actions’;

    render() {
    return this.props.dispatchOpenDocument(doc.filepath, doc.extension)}
    />;
    }
    .
    .
    .
    const mapDispatchToProps = {
    dispatchOpenDocument: (docPath, ext) => openDocument(docPath, ext),
    }

Leave a Reply

Your email address will not be published. Required fields are marked *