Search code examples
react-nativern-fetch-blob

Downloading mp3 file with RN-FETCH-BLOB

I am trying to download an mp3 file with rn-fetch-blob in ios from a link https://www.myinstants.com/media/sounds/anime-wow-sound-effect-mp3cut.mp3. Than I will share this file with react-native-share but I am not able to retrieve correct file like it is not mp3 file. It is file which whatsapp can not open. 

RNFetchBlob
  .config({
    fileCache: true,
    appendExt : 'mp3'
  })
  .fetch('GET', url, {
    //some headers ..
  })
  .then((res) => {
    // the temp file path
    console.log('The file saved to ', res.path())
    const shareOptions = {
      title: 'Share via',
      message: 'Do not miss to share meme sounds',
      url: 'file://' + res.path(),
    };
    Share.share(shareOptions)
      .then((res) => console.log(res))
      .catch((err) => err && console.log(err))
  })

File downloaded returns a path like this /var/mobile/Containers/Data/Application/BC8BC14B-FE8B-4E2C-ACA4-799270D8972B/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_m6vz8itit4jxuxpb8tabrm

If I add appendExt: 'mp3' it returns something like this /var/mobile/Containers/Data/Application/BC8BC14B-FE8B-4E2C-ACA4-799270D8972B/Documents/RNFetchBlob_tmp/RNFetchBlobTmp_m6vz8itit4jxuxpb8tabrm.mp3

Than if I share it on whatapp I got these file like things. This is not mp3 file. This is not even a file I can not open it. Question is do I download the mp3 file in a correct way in ios. If I do why do not I see a path which ends with .mp3 extension? Or am I just using Share library in a wrong way please someone just enlighten me. enter image description here

enter image description here

Solution

  • I solved the problem. RN-Fetch-Blob paths are not really good with iOS. It is better specifying the path like this.

    let path = RNFetchBlob.fs.dirs.DocumentDir

    and pass the file you want to download at the end of the path in RNFetchBlob.config like this.

     RNFetchBlob
  .config({
    fileCache: true,
    path: path + '/sound.mp3',

  })

    Than if you want to share file to random apps. Use react-native-share library's url parameter like this. 

    const shareOptions = {
      subject: 'Music',
      title: '',
      message: 'Do not miss to share meme sounds',
      url:  res.path(),
    };

    Both url: 'file:// + res.path() and url: res.path() will work correctly in Android. But in my case declaring url without file:// was working.