Open a file (pdf, word, excel, png etc.) on device with its default application in react-native

17,107

After some research, I decided to use react-native-fetch-blob. From version 0.9.0 it's possible to open downloaded file with Intent and use Download Manager. It also has API for iOS for opening documents.

Code now:

...
const dirs = RNFetchBlob.fs.dirs;
const android = RNFetchBlob.android;
...

  handleDownload = () => {
    RNFetchBlob.config({
      addAndroidDownloads: {
        title: 'CatHat1.jpg',
        useDownloadManager: true,
        mediaScannable: true,
        notification: true,
        description: 'File downloaded by download manager.',
        path: `${dirs.DownloadDir}/CatHat1.jpg`,
      },
    })
      .fetch('GET', 'http://www.swapmeetdave.com/Humor/Cats/CatHat1.jpg')
      .then((res) => {
        this.setState({ path: res.path() });
      })
      .catch((err) => console.log(err));
  };

...
render() {
...
        <Icon
          raised
          name="file-pdf-o"
          type="font-awesome"
          color="#f50"
          onPress={() => android.actionViewIntent(this.state.path, 'image/jpg')}
...
}
Share:
17,107

Related videos on Youtube

mradziwon
Author by

mradziwon

Updated on June 04, 2022

Comments

  • mradziwon
    mradziwon over 1 year

    I'm using react-native-fs to download a file(pdf, word, excel, png etc.) and I need to open it in other application. Is it possible to open downloaded file with Linking or better open a dialog with possible apps like when using Sharing? Linking in the code below tries to open the file but it closes immediately without any notification, but my app is still working fine. Is there some special way to build URLs for deep linking for a specific file type? Any ideas for the best solution?

    I see that there is old package react-native-file-opener but it's no longer maintained. This solution would be great.

    Simplified code for download component:

    import React, { Component } from 'react';
    import { Text, View, Linking, TouchableOpacity } from 'react-native';
    import { Icon } from 'react-native-elements';
    import RNFS from 'react-native-fs';
    
    import { showToast } from '../../services/toasts';
    
    class DownloadFile extends Component {
      state = {
        isDone: false,
      };
    
      handleDeepLinkPress = (url) => {
        Linking.openURL(url).catch(() => {
          showToast('defaultError');
        });
      };
    
      handleDownloadFile = () => {
        RNFS.downloadFile({
          fromUrl: 'https://www.toyota.com/content/ebrochure/2018/avalon_ebrochure.pdf',
          toFile: `${RNFS.DocumentDirectoryPath}/car.pdf`,
        }).promise.then(() => {
          this.setState({ isDone: true });
        });
      };
    
      render() {
        const preview = this.state.isDone
          ? (<View>
            <Icon
              raised
              name="file-image-o"
              type="font-awesome"
              color="#f50"
              onPress={() => this.handleDeepLinkPress(`file://${RNFS.DocumentDirectoryPath}/car.pdf`)}
            />
            <Text>{`file://${RNFS.DocumentDirectoryPath}/car.pdf`}</Text>
          </View>)
          : null;
        return (
          <View>
            <TouchableOpacity onPress={this.handleDownloadFile}>
              <Text>Download File</Text>
            </TouchableOpacity>
            {preview}
          </View>
        );
      }
    }
    
    export default DownloadFile;
    
  • thePsguy
    thePsguy over 4 years
    How did you go about deleting these downloaded files you no longer need? At which stage of this process might that go?