Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
like image 279
mradziwon Avatar asked Sep 12 '17 15:09

mradziwon


People also ask

How do I select multiple files in react native?

Ctrl + A can be used to select all files in the current directory. The fileSelect event will be triggered when the items of file manager control is selected or unselected. import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; ReactDOM. render( <App />, document.

How do I select a file in react native?

Setting up react-native-document-picker , a native document picker window appears. The user then selects a document from the device, and the local URI of the selected file is displayed on the screen. To implement this, install the react-native-document-picker library by installing the npm dependency.


1 Answers

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')}
...
}
like image 141
mradziwon Avatar answered Oct 12 '22 23:10

mradziwon