chore: on android use notification to display file upload progress instead of toast (#2628) [skip e2e]

packages/mobile/ios/Podfile.lock

@@ -507,6 +507,11 @@ PODS:
     - React-Core
   - RNKeychain (8.1.2):
     - React-Core
+  - RNNotifee (7.8.0):
+    - React-Core
+    - RNNotifee/NotifeeCore (= 7.8.0)
+  - RNNotifee/NotifeeCore (7.8.0):
+    - React-Core
   - RNPrivacySnapshot (1.0.0):
     - React-Core
   - RNShare (9.4.1):
@@ -593,6 +598,7 @@ DEPENDENCIES:
   - RNFS (from `../node_modules/react-native-fs`)
   - RNIap (from `../node_modules/react-native-iap`)
   - RNKeychain (from `../node_modules/react-native-keychain`)
+  - "RNNotifee (from `../node_modules/@notifee/react-native`)"
   - RNPrivacySnapshot (from `../node_modules/react-native-privacy-snapshot`)
   - RNShare (from `../node_modules/react-native-share`)
   - RNStoreReview (from `../node_modules/react-native-store-review`)
@@ -716,6 +722,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-iap"
   RNKeychain:
     :path: "../node_modules/react-native-keychain"
+  RNNotifee:
+    :path: "../node_modules/@notifee/react-native"
   RNPrivacySnapshot:
     :path: "../node_modules/react-native-privacy-snapshot"
   RNShare:
@@ -789,6 +797,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNIap: c397f49db45af3b10dca64b2325f21bb8078ad21
   RNKeychain: a65256b6ca6ba6976132cc4124b238a5b13b3d9c
+  RNNotifee: f3c01b391dd8e98e67f539f9a35a9cbcd3bae744
   RNPrivacySnapshot: 8eaf571478a353f2e5184f5c803164f22428b023
   RNShare: 32e97adc8d8c97d4a26bcdd3c45516882184f8b6
   RNStoreReview: 923b1c888c13469925bf0256dc2c046eab557ce5

packages/mobile/package.json

@@ -72,6 +72,7 @@
     "node": ">=16"
   },
   "dependencies": {
+    "@notifee/react-native": "^7.8.0",
     "react-native-store-review": "^0.4.1"
   }
 }

packages/mobile/src/Lib/MobileDevice.ts

@@ -50,6 +50,7 @@ import { Database } from './Database/Database'
 import { isLegacyIdentifier } from './Database/LegacyIdentifier'
 import { LegacyKeyValueStore } from './Database/LegacyKeyValueStore'
 import Keychain from './Keychain'
+import notifee, { AuthorizationStatus, Notification } from '@notifee/react-native'
 
 export type BiometricsType = 'Fingerprint' | 'Face ID' | 'Biometrics' | 'Touch ID'
 
@@ -75,7 +76,40 @@ export class MobileDevice implements MobileDeviceInterface {
     private stateObserverService?: AppStateObserverService,
     private androidBackHandlerService?: AndroidBackHandlerService,
     private colorSchemeService?: ColorSchemeObserverService,
-  ) {}
+  ) {
+    this.initializeNotifications().catch(console.error)
+  }
+
+  async initializeNotifications() {
+    if (Platform.OS !== 'android') {
+      return
+    }
+
+    await notifee.createChannel({
+      id: 'files',
+      name: 'File Upload/Download',
+    })
+  }
+
+  async canDisplayNotifications(): Promise<boolean> {
+    const settings = await notifee.requestPermission()
+
+    return settings.authorizationStatus >= AuthorizationStatus.AUTHORIZED
+  }
+
+  async displayNotification(options: Notification): Promise<string> {
+    return await notifee.displayNotification({
+      ...options,
+      android: {
+        ...options.android,
+        channelId: 'files',
+      },
+    })
+  }
+
+  async cancelNotification(notificationId: string): Promise<void> {
+    await notifee.cancelNotification(notificationId)
+  }
 
   async removeRawStorageValuesForIdentifier(identifier: string): Promise<void> {
     await this.removeRawStorageValue(namespacedKey(identifier, RawStorageKey.SnjsVersion))

packages/mobile/src/MobileWebAppContainer.tsx

@@ -14,6 +14,7 @@ import { MobileDevice, MobileDeviceEvent } from './Lib/MobileDevice'
 import { IsDev } from './Lib/Utils'
 import { ReceivedSharedItemsHandler } from './ReceivedSharedItemsHandler'
 import { ReviewService } from './ReviewService'
+import notifee, { EventType } from '@notifee/react-native'
 
 const LoggingEnabled = IsDev
 
@@ -117,6 +118,34 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     }
   }, [webViewRef, stateService, device, androidBackHandlerService, colorSchemeService])
 
+  useEffect(() => {
+    return notifee.onForegroundEvent(({ type, detail }) => {
+      if (type !== EventType.ACTION_PRESS) {
+        return
+      }
+
+      const { notification, pressAction } = detail
+
+      if (!notification || !pressAction) {
+        return
+      }
+
+      if (pressAction.id !== 'open-file') {
+        return
+      }
+
+      webViewRef.current?.postMessage(
+        JSON.stringify({
+          reactNativeEvent: ReactNativeToWebEvent.OpenFilePreview,
+          messageType: 'event',
+          messageData: {
+            id: notification.id,
+          },
+        }),
+      )
+    })
+  }, [])
+
   useEffect(() => {
     const observer = device.addMobileDeviceEventReceiver((event) => {
       if (event === MobileDeviceEvent.RequestsWebViewReload) {