⚠️ [PAY-2493] Replace RNFetchBlob with ReactNativeBlobUtil (#7624)

packages/mobile/android/app/src/main/AndroidManifest.xml

@@ -11,7 +11,10 @@
 
     <uses-permission android:name="android.permission.VIBRATE" />
     <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
+    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 
     <uses-permission android:name="android.permission.CAMERA"/>
     <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
@@ -24,6 +27,7 @@
             <intent-filter android:autoVerify="true">
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
+                <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
             </intent-filter>
             <intent-filter android:autoVerify="true">
                 <action android:name="android.intent.action.VIEW" />

packages/mobile/ios/Podfile.lock

@@ -986,6 +986,8 @@ PODS:
   - React-Mapbuffer (0.73.1):
     - glog
     - React-debug
+  - react-native-blob-util (0.19.4):
+    - React-Core
   - react-native-blur (4.3.2):
     - React-Core
   - react-native-config (1.5.1):
@@ -1224,8 +1226,6 @@ PODS:
     - React-Core
     - RiveRuntime (= 5.5.1)
   - RiveRuntime (5.5.1)
-  - rn-fetch-blob (0.13.0-beta.1):
-    - React-Core
   - RNBootSplash (5.2.1):
     - React-Core
   - RNCAsyncStorage (1.21.0):
@@ -1375,6 +1375,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector-modern`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - react-native-blob-util (from `../node_modules/react-native-blob-util`)
   - "react-native-blur (from `../node_modules/@react-native-community/blur`)"
   - react-native-config (from `../node_modules/react-native-config`)
   - "react-native-cookies (from `../../../node_modules/@react-native-cookies/cookies`)"
@@ -1419,7 +1420,6 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - rive-react-native (from `../../../node_modules/rive-react-native`)
-  - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
@@ -1546,6 +1546,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
+  react-native-blob-util:
+    :path: "../node_modules/react-native-blob-util"
   react-native-blur:
     :path: "../node_modules/@react-native-community/blur"
   react-native-config:
@@ -1634,8 +1636,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   rive-react-native:
     :path: "../../../node_modules/rive-react-native"
-  rn-fetch-blob:
-    :path: "../node_modules/rn-fetch-blob"
   RNBootSplash:
     :path: "../node_modules/react-native-bootsplash"
   RNCAsyncStorage:
@@ -1735,6 +1735,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 369048694e39942063c5d08e9580b43e2edd379a
   React-logger: e0c1e918d9588a9f39c9bc62d9d6bfe9ca238d9d
   React-Mapbuffer: 9731a0a63ebaf8976014623c4d637744d7353a7c
+  react-native-blob-util: 30a6c9fd067aadf9177e61a998f2c7efb670598d
   react-native-blur: cfdad7b3c01d725ab62a8a729f42ea463998afa2
   react-native-config: 86038147314e2e6d10ea9972022aa171e6b1d4d8
   react-native-cookies: f54fcded06bb0cda05c11d86788020b43528a26c
@@ -1780,7 +1781,6 @@ SPEC CHECKSUMS:
   ReactCommon: ddb128564dcbfa0287d3d1a2d10f8c7457c971f6
   rive-react-native: 79777686cb29eaba6a28a0534fe82c8b8da41b4a
   RiveRuntime: b57830ff73f406f3b4022f457b16690535ca4d05
-  rn-fetch-blob: a55789391d32d9c951b5b9eb7e3c3635ec67e324
   RNBootSplash: f7fd5a7d4f1c13be3d0f5f31d27af7bcc1b1acef
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
   RNCClipboard: 60fed4b71560d7bfe40e9d35dea9762b024da86d

packages/mobile/package.json

@@ -172,7 +172,7 @@
     "redux-thunk": "2.4.2",
     "reselect": "4.0.0",
     "rive-react-native": "6.2.3",
-    "rn-fetch-blob": "0.13.0-beta.1",
+    "react-native-blob-util": "0.19.4",
     "semver": "7.3.7",
     "stream-browserify": "3.0.0",
     "text-encoding-polyfill": "0.6.7",

packages/mobile/src/services/offline-downloader/offline-storage.ts

@@ -10,11 +10,11 @@ import type {
 } from '@audius/common/models'
 import type { Nullable } from '@audius/common/utils'
 import { allSettled } from '@audius/common/utils'
-import RNFetchBlob from 'rn-fetch-blob'
+import ReactNativeBlobUtil from 'react-native-blob-util'
 
 const {
   fs: { dirs, exists, ls, mkdir, readFile, unlink, writeFile }
-} = RNFetchBlob
+} = ReactNativeBlobUtil
 
 export type OfflineCollection = Collection & { user: UserMetadata }
 

packages/mobile/src/services/track-download.ts

@@ -5,10 +5,10 @@ import { Platform, Share } from 'react-native'
 import { zip } from 'react-native-zip-archive'
 import type {
   FetchBlobResponse,
-  RNFetchBlobConfig,
+  ReactNativeBlobUtilConfig,
   StatefulPromise
-} from 'rn-fetch-blob'
-import RNFetchBlob from 'rn-fetch-blob'
+} from 'react-native-blob-util'
+import ReactNativeBlobUtil from 'react-native-blob-util'
 import { dedupFilenames } from '~/utils'
 
 import { dispatch } from 'app/store'
@@ -32,14 +32,14 @@ const cancelDownloadTask = () => {
 
 const removePathIfExists = async (path: string) => {
   try {
-    const exists = await RNFetchBlob.fs.exists(path)
+    const exists = await ReactNativeBlobUtil.fs.exists(path)
     if (!exists) return
-    await RNFetchBlob.fs.unlink(path)
+    await ReactNativeBlobUtil.fs.unlink(path)
   } catch {}
 }
 
 /**
- * Download a file via RNFetchBlob
+ * Download a file via ReactNativeBlobUtil
  */
 const downloadOne = async ({
   fileUrl,
@@ -51,19 +51,19 @@ const downloadOne = async ({
   fileUrl: string
   filename: string
   directory: string
-  getFetchConfig: (filePath: string) => RNFetchBlobConfig
+  getFetchConfig: (filePath: string) => ReactNativeBlobUtilConfig
   onFetchComplete?: (path: string) => Promise<void>
 }) => {
   const filePath = directory + '/' + filename
 
   try {
-    const fetchTask = RNFetchBlob.config(getFetchConfig(filePath)).fetch(
+    const fetchTask = ReactNativeBlobUtil.config(getFetchConfig(filePath)).fetch(
       'GET',
       fileUrl
     )
     fetchTasks = [fetchTask]
 
-    // TODO: The RNFetchBlob library is currently broken for download progress events on both platforms.
+    // TODO: The ReactNativeBlobUtil library is currently broken for download progress events on both platforms.
     // fetchTask.progress({ interval: 250 }, (received, total) => {
     //   dispatch(setDownloadedPercentage((received / total) * 100))
     // })
@@ -87,7 +87,7 @@ const downloadOne = async ({
 }
 
 /**
- * Download multiple files via RNFetchBlob
+ * Download multiple files via ReactNativeBlobUtil
  */
 const downloadMany = async ({
   files,
@@ -97,13 +97,13 @@ const downloadMany = async ({
 }: {
   files: { url: string; filename: string }[]
   directory: string
-  getFetchConfig: (filePath: string) => RNFetchBlobConfig
+  getFetchConfig: (filePath: string) => ReactNativeBlobUtilConfig
   onFetchComplete?: (path: string) => Promise<void>
 }) => {
   dedupFilenames(files)
   try {
     const responsePromises = files.map(({ url, filename }) =>
-      RNFetchBlob.config(getFetchConfig(directory + '/' + filename)).fetch(
+      ReactNativeBlobUtil.config(getFetchConfig(directory + '/' + filename)).fetch(
         'GET',
         url
       )
@@ -156,7 +156,7 @@ const download = async ({
   dispatch(setFetchCancel(cancelDownloadTask))
 
   const audiusDirectory =
-    RNFetchBlob.fs.dirs.DocumentDir + '/' + audiusDownloadsDirectory
+    ReactNativeBlobUtil.fs.dirs.DocumentDir + '/' + audiusDownloadsDirectory
 
   if (Platform.OS === 'ios') {
     const onFetchComplete = async (path: string) => {
@@ -209,7 +209,7 @@ const download = async ({
         /* Single file download on Android will use the Download Manager and go
          * straight to the Downloads directory.
          */
-        directory: RNFetchBlob.fs.dirs.DownloadDir,
+        directory: ReactNativeBlobUtil.fs.dirs.DownloadDir,
         getFetchConfig: (filePath) => ({
           addAndroidDownloads: {
             description: filename,
@@ -236,13 +236,13 @@ const download = async ({
          * the initial downloads to avoid showing notifications, then manually add a
          * notification for the zip file.
          */
-        directory: RNFetchBlob.fs.dirs.DownloadDir + '/' + rootDirectoryName,
+        directory: ReactNativeBlobUtil.fs.dirs.DownloadDir + '/' + rootDirectoryName,
         getFetchConfig: (filePath) => ({
           fileCache: true,
           path: filePath
         }),
         onFetchComplete: async (path: string) => {
-          RNFetchBlob.android.addCompleteDownload({
+          ReactNativeBlobUtil.android.addCompleteDownload({
             title: rootDirectoryName,
             description: rootDirectoryName,
             mime: 'application/zip',

packages/mobile/src/store/offline-downloads/sagas/migrateOfflineDataPathSaga.ts

@@ -2,7 +2,7 @@ import path from 'path'
 
 import { difference } from 'lodash'
 import RNFS from 'react-native-fs'
-import RNFetchBlob from 'rn-fetch-blob'
+import ReactNativeBlobUtil from 'react-native-blob-util'
 import { call, put, select } from 'typed-redux-saga'
 
 import { make, track } from 'app/services/analytics'
@@ -21,7 +21,7 @@ import { DOWNLOAD_REASON_FAVORITES } from '../constants'
 import { getIsOfflineEnabled } from './getIsOfflineEnabled'
 const {
   fs: { dirs, unlink, exists }
-} = RNFetchBlob
+} = ReactNativeBlobUtil
 
 // Current migration: 4/3/2023
 // dirs.DocumentDir -> dirs.CacheDir
@@ -63,7 +63,7 @@ export function* migrateOfflineDataPathSaga() {
   }
 }
 
-// Util to recursively copy a directory since neither RNFS or rn-fetch-blob come with one
+// Util to recursively copy a directory since neither RNFS or react-native-blob-util come with one
 async function copyRecursive(source: string, destination: string) {
   // reads items from source directory
   const items = await RNFS.readDir(source)

packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadCollectionWorker.ts

@@ -5,7 +5,7 @@ import type {
 import { SquareSizes } from '@audius/common/models'
 import { accountSelectors, getContext } from '@audius/common/store'
 import { removeNullable } from '@audius/common/utils'
-import RNFetchBlob from 'rn-fetch-blob'
+import ReactNativeBlobUtil from 'react-native-blob-util'
 import { select, call, put, take, race, all } from 'typed-redux-saga'
 
 import { createAllImageSources } from 'app/hooks/useContentNodeImage'
@@ -183,15 +183,15 @@ async function writeCollectionMetadata(collection: UserCollectionMetadata) {
   const collectionMetadataPath = getLocalCollectionJsonPath(
     playlist_id.toString()
   )
-  return await RNFetchBlob.fs.writeFile(
+  return await ReactNativeBlobUtil.fs.writeFile(
     collectionMetadataPath,
     JSON.stringify(collection)
   )
 }
 
 async function removeDownloadedCollection(collectionId: CollectionId) {
   const collectionDir = getLocalCollectionDir(collectionId.toString())
-  const exists = await RNFetchBlob.fs.exists(collectionDir)
+  const exists = await ReactNativeBlobUtil.fs.exists(collectionDir)
   if (!exists) return
-  return await RNFetchBlob.fs.unlink(collectionDir)
+  return await ReactNativeBlobUtil.fs.unlink(collectionDir)
 }

packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadFile.ts

@@ -1,9 +1,9 @@
 import { CANCEL } from 'redux-saga'
-import RNFetchBlob from 'rn-fetch-blob'
+import ReactNativeBlobUtil from 'react-native-blob-util'
 
 // Downloads file from uri to destination, with saga cancellation
 export function downloadFile(uri: string, destination: string) {
-  const { fetch } = RNFetchBlob.config({ path: destination })
+  const { fetch } = ReactNativeBlobUtil.config({ path: destination })
   const fetchTask = fetch('GET', uri)
   fetchTask[CANCEL] = fetchTask.cancel
   return fetchTask

packages/mobile/src/store/offline-downloads/sagas/offlineQueueSagas/workers/downloadTrackWorker.ts

@@ -16,7 +16,7 @@ import {
   removeNullable,
   getQueryParams
 } from '@audius/common/utils'
-import RNFetchBlob from 'rn-fetch-blob'
+import ReactNativeBlobUtil from 'react-native-blob-util'
 import { select, call, put, all, take, race } from 'typed-redux-saga'
 
 import { createAllImageSources } from 'app/hooks/useContentNodeImage'
@@ -228,15 +228,15 @@ async function writeTrackMetadata(track: UserTrackMetadata) {
 
   const trackMetadataPath = getLocalTrackJsonPath(track_id.toString())
 
-  return await RNFetchBlob.fs.writeFile(
+  return await ReactNativeBlobUtil.fs.writeFile(
     trackMetadataPath,
     JSON.stringify(trackMetadata)
   )
 }
 
 async function removeDownloadedTrack(trackId: ID) {
   const trackDirectory = getLocalTrackDir(trackId.toString())
-  const exists = await RNFetchBlob.fs.exists(trackDirectory)
+  const exists = await ReactNativeBlobUtil.fs.exists(trackDirectory)
   if (!exists) return
-  return await RNFetchBlob.fs.unlink(trackDirectory)
+  return await ReactNativeBlobUtil.fs.unlink(trackDirectory)
 }