CODEWITHSUNDEEP
react-nativefetch
Harry Lakhmani
Harry Lakhmani

Reputation: 91

React-Native: How to show progress while downloading file?

Requirement- I want to show a progressive indicator showing the percentage of loading completed. I have used fetch for api service calls. Is it possible to get percentage of downloading completion in any way? Or any third party library?

Upvotes: 5

Views: 18251

Answers (3)

Johncy
Johncy

Reputation: 504

I have solved this by, Here's an npm i used rn-fetch-blob

downloadFile() {
  let dirs = RNFetchBlob.fs.dirs;
  const filePath = `${dirs.DocumentDir}`;
  var filename = this.state.invoiceUrl.substring(this.state.invoiceUrl.lastIndexOf('/')+1);
  RNFetchBlob.config({
      path:`${dirs.DownloadDir}/${filename}`,
      fileCache:false
      // addAndroidDownloads: {
      //     notification : true,
      //     useDownloadManager : true,
      //     description: 'TaxiJo Payment Invoice',
      //     mime:'application/pdf',
      //     mediaScannable:true,
      //     path:`${dirs.DownloadDir}/${filename}`
      // },
  })
  .fetch('GET',this.state.invoiceUrl,{
      'Cache-Control' : 'no-store'
  })
  .progress({ interval: 250 },(received,total)=>{
      console.log('progress',received/total);
      this.setState({
          downloadProgress:(received/total)*100
      })
  })
  .then(res=>{
      // RNFetchBlob.fs.stat(res.path()).then(stats=>{
      //     console.log(stats);
      // }).catch(err=>{
      //     console.log('error while getting mimetypes');
      // })
      this.setState({
          downloadProgress:0
      })
      // RNFetchBlob.fs.exists(res.path()).then(exist=>{
      //     console.log(`file ${exist ? '' : 'not'} exists`)
      // }).catch(
      //     err=>console.log('error while checking existance',err)
      // );
      if(Platform.OS === 'ios'){
          RNFetchBlob.ios.openDocument(res.path());
      }else{
          RNFetchBlob.android.actionViewIntent(res.path(),"application/pdf");
      }
  })
  .catch((errorMessage,statusCode)=>{
      console.log("error with downloading file",errorMessage)
  })
}

Upvotes: 8

Sunita
Sunita

Reputation: 336

in case you want to show downloading progress of any image , you can use "react-native-fetch-blob". Please refer below url to know more

https://www.npmjs.com/package/react-native-fetch-blob

Upvotes: 2

Ankush Rishi
Ankush Rishi

Reputation: 3170

You can use react-native js coach to find number of packages for a particular search.

Like for progress you can use from this link: https://js.coach/react-native/react-native-progress?search=progress

All are third party packages.

Upvotes: 0

Related Questions