react-nativereact-native-linking

React Native View PDF


I have a react-native app which opens a PDF document using Linking as shown below:

const handlePress = () => {
    Linking.openURL(
      "https://link/to/file.pdf"
    );
};

The problem with the above code is that it opens the web browser and downloads the file. Isn't there any way through which I can open the file via the default PDF Viewer of the device?


Solution

  • You can download the PDF with rn-fetch-blob to your phone storage and open it with default PDF viewer like below:

    import { Platform } from "react-native";
    import RNFetchBlob from 'rn-fetch-blob'
    
    const android = RNFetchBlob.android;
    
    RNFetchBlob.config({
      addAndroidDownloads: {
        useDownloadManager: true,
        title: "awesome.pdf",
        description: "An awesome PDF",
        mime: "application/pdf",
        mediaScannable: true,
        notification: true,
      },
    })
      .fetch("GET", `http://www.example.com/awesome.pdf`)
      .then((res) => {
        const path = res.path();
        if (Platform.OS === "ios") {
          RNFetchBlob.ios.openDocument(path);
        } else {
          android.actionViewIntent(path, "application/pdf");
        }
      });