how to download multiple files from URL in FlatList in react native with separate progress bar

Question

i am new in react-native and I want download multiple data in FlatList using URL with progress bar separate for its item download process ...in single file its process and progress working fine but when I try to download multiple file that time its not working. download multyple files hangs full mobile screen and not able to use any other options from screen

how to do download from URL and display percentage in list

 const DATA = [
{
  id: '0',
  file_title: 'zero Item',
  download_file_url: 'http://212.183.159.230/50MB.zip',
},
{
  id: '1',
  file_title: 'First Item',
  download_file_url: 'http://212.183.159.230/50MB.zip',
},]


 <FlatList
      data={DATA}
      horizontal={false}
      renderItem={renderItem}
      keyExtractor={item => item.id}
    />


  const renderItem = ({item}) => (
     <Item title={item.file_title} downloadUrl={item.download_file_url} />
 );

const Item = ({title, downloadUrl}) => (
  <View>
    <DownloadItem title={title} downloadUrl={downloadUrl} />
  </View>
);

i also declare seprate component for download

const DownloadItem = ({title, downloadUrl}) => {
const [downloadProgress, setDownloadProgress] = useState(0);
 return (
  <View>
  <View style={style.parentView}>
    <View
      style={{
        height: 55,
        width: 55,
        borderRadius: 2,
        alignItems: 'center',
        backgroundColor: rendomRGB(),
      }}>
      <Text style={style.extensionTxt}>
        {getFirstCharacterOfExtensionFromURL(downloadUrl)}
      </Text>
    </View>

    <View>
      <Text style={style.fileTitle}>{title}</Text>
      <Text style={style.fileDesc}>{title}</Text>
      <View style={style.progressView}>
        <Progress.Bar
          style={style.fileDesc}
          progress={downloadProgress}
          width={200}
        />
        <TouchableOpacity
          onPress={() => startDownloadZip(title, downloadUrl)}>
          <Image
            style={style.imgCloseResume}
            source={require('../../assets/close.png')}
          />
        </TouchableOpacity>
      </View>
    </View>
  </View>

  <View style={style.deviderView}></View>
</View>
);



function startDownloadZip(title, downloadUrl) {
const appParentPath = RNFS.DocumentDirectoryPath; 
const appFolderPath = appParentPath + '/MyFiles';

RNFS.mkdir(appFolderPath)
  .then(success => {
    console.log('Folder created!', success);
    background: true,
    RNFS.downloadFile({
      fromUrl: `${downloadUrl}`,
      toFile: `${appFolderPath + '/' + title}`,
      progress: (res: DownloadProgressCallbackResult) => {

        let progressPercent = res.bytesWritten / res.contentLength; // to calculate in percentage
        setDownloadProgress(progressPercent);
      },
    })
      .promise.then(responce => {
        console.log('file download ', responce);
      })
      .catch(err => {
        console.log('download error', err);
      });
  })
  .catch(err => {
    console.log('mkdir error ', err);
  });
 }
};

Answer 1

You can create a standalone component for your renderItem in which you can call the download progress. I attach an example below.

function ParentComp() {


  return <FlatList renderItem={({item}) => <ChildComponent item={item} />} />
}

function ChildComponent({item}) {
  const [progress, setProgress] = useState(0)

  "here comes your RNFS logic"

  return <ProgressBar value={progress} />
}