How to download and retrieve local files on iOS with react native and react-native-fetch-blob?

Question

I'm using react-native-fetch-blob to download mp3 files and then playing them later. The problem is that the actual path for RNFetchBlob.fs.dirs.DocumentDir changes when I close the app and restart again, which means I can't use the absolute file path I stored right after downloading the files retrieve the files in the next run of the app.

Here's my code for downloading and storing the file paths:

export function downloadAudio(urlArray) { //download every section in the urlArray
  return (dispatch) => {
    Promise.all(urlArray.map(section => {
      dispatch(startDownload(section.section_id))
      console.log('download start for id = ',section.section_id ) //start download
      return RNFetchBlob
      .config({
        path: RNFetchBlob.fs.dirs.DocumentDir + '/courseSections/' + section.section_id + '.mp3',
        appendExt: 'mp3'
      })
      .fetch('GET', section.section_url, {
        'Cache-Control': 'no-store'
      })
      .progress({ count: 10 }, (received, total) => {
        console.log(`progress for section ${section.section_id}: `, Math.floor(received/total*100), '%')
        dispatch(downloadProgress({id: section.section_id, progress: Math.floor(received/total*100)/100}))
      })
      .then(res => {
        console.log(`section ${section.section_id} is saved to: `, res.path())
        return { path: res.path(), id: section.section_id }
      })
      .then(pathInfo => dispatch(downloadSuccess(pathInfo))) //download finished
    }))
      .catch((error, statusCode) => {
        console.log(statusCode, ' error: ', error)
      })
  }
}

I stored { path: res.path(), id: section.section_id } as part of persisted app state. But it's not useful cuz next time I open the app, the file path has been reassigned. For example, here's the path one file was downloaded to: downloaded file path

But after I close the app and restart, the path is changed to: /Users/NatashaChe/Library/Developer/CoreSimulator/Devices/830778DE-3CE3-4FC7-AA4B-DFBAE999751C/data/Containers/Data/Application/0C47E33F-ACF8-4539-9456-8FF3E8FBECB2/Documents/courseSections/14.mp3

i.e. the files got assigned to a different sub-folder under the Application folder.

Obviously the audio player (I'm using react-native-sound) can't find the file using the original path that the app has stored. So my question is: Is there a way I can fix the path? Or is there some other way of retrieving files that I'm not aware of?

And also, I'm using the iOS simulator on my computer. Haven't tried this on the phone yet. Does anyone know if the above code can be directly used on iphone and have the file saved to my app's directory? Or shall I set the file path in any other way?

I'm using react native 0.41.

Answer 1

I made the following change to make it work, at least on simulator for now. Not sure what'd happen on an actual phone.

When retrieving the file, instead of using the file path as returned by res.path() as in the code above, I now directly use filePath = RNFetchBlob.fs.dirs.DocumentDir + '/courseSections/' + sectionInfo.section.section_id + '.mp3' when retrieving the file.