Download file button

App.tsx

import React, { useState } from 'react'
import { StyleSheet, TouchableOpacity, View, Text, Alert } from 'react-native'
import RNFS from 'react-native-fs'

const perc2color = (perc: number) => {
  var r, g, b = 0
  if (perc < 50) {
    r = 255
    g = Math.round(5.1 * perc)
  }
  else {
    g = 255
    r = Math.round(510 - 5.10 * perc)
  }
  var h = r * 0x10000 + g * 0x100 + b * 0x1
  return '#' + ('000000' + h.toString(16)).slice(-6)
}
const messages = {
  idle: 'Fatura indir',
  ongoingDownload: 'İndirme işlemi devam ediyor...',
  starting: 'İndirme başlatılıyor.',
  downloading: 'Faturanız indiriliyor...',
  complated: 'Fatura indirildi!',
}

export default () => {
  const [status, setStatus] = useState<string>(messages.idle)
  const [percentage, setPercentage] = useState<number>(-1)
  const [downloadJobId, setDownloadJobId] = useState<number>(-1)

  const url = 'https://research.nhm.org/pdfs/10840/10840.pdf'
  const destination = RNFS.DownloadDirectoryPath + '/example.pdf'

  const checkFileExist = async (): Promise<boolean> => {
    return new Promise(async resolve => {

      const exist = await RNFS.exists(destination);

      if (!exist) resolve(true)
      else {
        Alert.alert(
          "Dikkat",
          "Dosya daha önce indirilmiş. Tekrar indirmek istiyor musunuz?",
          [
            {
              text: "Tekrar indir",
              style: "default",
              onPress: () => { resolve(true) }
            },
            {
              text: "Vazgeç",
              isPreferred: true,
              style: "cancel",
              onPress: () => { resolve(false) }
            }
          ], { cancelable: true, onDismiss: () => { resolve(false) } }
        )
      }
    })
  }


  const downloadFile = async () => {
    if (downloadJobId != -1) {
      // RNFS.stopDownload(downloadJobId)
      setStatus(messages.ongoingDownload)
      setTimeout(() => {
        setStatus(messages.downloading)
      }, 2000)
      return
    }

    const exist = await checkFileExist()
    if (!exist) return;

    setStatus(messages.starting)

    RNFS.downloadFile({
      fromUrl: url,
      toFile: destination,
      background: true,
      discretionary: true,
      progressDivider: 1,
      begin: (res: RNFS.DownloadBeginCallbackResult) => {
        setStatus(messages.downloading)
        setPercentage(-1)
        setDownloadJobId(res.jobId)
      },
      progress: (res: RNFS.DownloadProgressCallbackResult) => {
        const progress = Math.floor((res.bytesWritten / res.contentLength) * 100)
        setPercentage(progress)
      },
    })
      .promise.then((response: RNFS.DownloadResult) => {
        if (response.statusCode == 200) {
          setStatus(messages.complated)
          setPercentage(-1)
          setDownloadJobId(-1)
        }
      })
      .catch((err) => {
        setStatus(`${err}`)
        setPercentage(-1)
        setDownloadJobId(-1)
        setTimeout(() => {
          setStatus(messages.idle)
        }, 2000)
      })
  }

  return (
    <View style={styles.container}>

      <TouchableOpacity
        onPress={downloadFile}
        style={styles.downloadButton}>

        {percentage != -1 &&
          <View style={[
            styles.percentageView, {
              backgroundColor: perc2color(percentage),
              width: `${percentage}%`
            }]} />
        }

        {status &&
          <Text style={styles.statusText}>{status}</Text>
        }
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  downloadButton: {
    height: 40,
    width: 300,
    borderWidth: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  percentageView: {
    height: 3,
    bottom: 0, left: 0, right: 0,
    position: 'absolute',
  },
  statusText: {

  }

})