From 0b3f7876c82a8873901bc1bc77a17f6f98825166 Mon Sep 17 00:00:00 2001 From: Santhosh Vaiyapuri <3846977+santhoshvai@users.noreply.github.com> Date: Thu, 8 Aug 2024 14:18:29 +0200 Subject: [PATCH] fix(react-native)!: make notifee to be optional (#1456) - [x] update codebase of the SDK - [x] documentation changes - [ ] test on android 24 emulator without notifee installed --------- Co-authored-by: Oliver Lazoroski --- .../02-installation/01-react-native.mdx | 3 +- .../01-setup/02-installation/02-expo.mdx | 2 - .../03-core/07-keeping-call-alive.mdx | 28 +++----- .../03-ringing-setup/01-react-native.mdx | 1 + .../03-ringing-setup/02-expo.mdx | 1 + .../01-react-native.mdx | 1 + .../04-other-than-ringing-setup/02-expo.mdx | 1 + .../02-setup/01-react-native.mdx | 1 - .../__tests__/withAndroidManifest.test.ts | 3 + .../__tests__/withAndroidPermissions.test.ts | 1 + .../src/withAndroidManifest.ts | 66 ++++++++----------- .../src/withAndroidPermissions.ts | 33 ++++++---- .../src/withMainActivity.ts | 48 ++++++-------- packages/react-native-sdk/jest-setup.ts | 4 ++ packages/react-native-sdk/package.json | 5 +- .../hooks/useAndroidKeepCallAliveEffect.ts | 46 ++++++++----- .../src/utils/StreamVideoRN/types.ts | 2 +- .../src/utils/push/android.ts | 45 +++++++++---- .../react-native-sdk/src/utils/push/ios.ts | 13 ++-- .../src/utils/push/libs/index.ts | 1 + .../src/utils/push/libs/notifee.ts | 33 ++++++++++ yarn.lock | 2 + 22 files changed, 202 insertions(+), 138 deletions(-) create mode 100644 packages/react-native-sdk/src/utils/push/libs/notifee.ts diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/01-react-native.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/01-react-native.mdx index 63163455ba..5976fd8ad9 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/01-react-native.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/01-react-native.mdx @@ -24,7 +24,7 @@ Stream Video React Native SDK requires installing some peer dependencies to prov ```bash title=Terminal yarn add @stream-io/react-native-webrtc \ react-native-incall-manager react-native-svg \ - @react-native-community/netinfo @notifee/react-native + @react-native-community/netinfo npx pod-install ``` @@ -35,7 +35,6 @@ So what did we install precisely? - `react-native-incall-manager` handles media-routes/sensors/events during an audio/video call. - `react-native-svg` provides SVG support to React Native, SVRN's components and it's icons are reliant on this dependency. - `@react-native-community/netinfo` - is used to detect the device's connectivity state, type and quality. -- `@notifee/react-native` - is used to keep calls alive in the background on Android. ### Android Specific installation diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx index 0d81f525c9..b328d16f0e 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/02-expo.mdx @@ -22,7 +22,6 @@ npx expo install @config-plugins/react-native-webrtc npx expo install react-native-incall-manager npx expo install react-native-svg npx expo install @react-native-community/netinfo -npx expo install @notifee/react-native ``` So what did we install precisely? @@ -33,7 +32,6 @@ So what did we install precisely? - `react-native-incall-manager` handles media-routes/sensors/events during an audio/video call. - `react-native-svg` provides SVG support to React Native, SVRN's components and it's icons are reliant on this dependency. - `@react-native-community/netinfo` - is used to detect the device's connectivity state, type and quality. -- `@notifee/react-native` - is used to keep calls alive in the background on Android. ### Android Specific installation diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/07-keeping-call-alive.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/07-keeping-call-alive.mdx index a279809bbc..d11e5c3d1b 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/07-keeping-call-alive.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/03-core/07-keeping-call-alive.mdx @@ -17,44 +17,32 @@ Head over to the documentation [here](../../advanced/pip/) on how to picture-in- ### Android 7 -There is no support for Picture-in-picture (PiP) mode below Android 8. Hence in those platforms, we use a [foreground service](https://developer.android.com/guide/components/foreground-services) to keep the call alive. The SDK will manage the foreground service. In Expo, the config plugin adds it up. But if Expo is not used, be sure to add the following: - -#### Add declarations in AndroidManifest +There is no support for Picture-in-picture (PiP) mode below Android 8. Hence in those platforms, we use a [foreground service](https://developer.android.com/guide/components/foreground-services) to keep the call alive. The SDK will automatically create and manage the foreground service. The only requirement is to install the `Notifee` library so that SDK can handle a foreground service. To install the [`Notifee`](https://github.com/invertase/notifee) library, run the following command in your terminal of choice: -In Expo, declarations in Android Manifest are automatically done by the expo config plugin of the SDK, so nothing needs to be added manually. +```bash title=Terminal +npx expo install @notifee/react-native +``` -Add the following in `AndroidManifest.xml`: - -```xml title="AndroidManifest.xml" - - - - - - +```bash title=Terminal +yarn add @notifee/react-native +npx pod-install ``` - -#### Optional: override the default configuration of the notifications +#### Optional: override the default configuration of the foreground service notifications You can also optionally override the default configuration of the notification used by the SDK. Below we give an example of that: ```ts import { StreamVideoRN } from '@stream-io/video-react-native-sdk'; -import { AndroidImportance } from '@notifee/react-native'; StreamVideoRN.updateConfig({ foregroundService: { diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/01-react-native.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/01-react-native.mdx index 23fdb35bba..e659e46729 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/01-react-native.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/01-react-native.mdx @@ -27,6 +27,7 @@ yarn add @react-native-firebase/app yarn add @react-native-firebase/messaging yarn add react-native-callkeep yarn add react-native-voip-push-notification +yarn add @notifee/react-native npx pod-install ``` diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/02-expo.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/02-expo.mdx index 9590564a68..4106ca14e2 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/02-expo.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/03-ringing-setup/02-expo.mdx @@ -27,6 +27,7 @@ npx expo install @react-native-firebase/app npx expo install @react-native-firebase/messaging npx expo install react-native-voip-push-notification npx expo install react-native-callkeep +npx expo install @notifee/react-native ``` So what did we install precisely? diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/01-react-native.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/01-react-native.mdx index 8f3a738b4a..3dd1467037 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/01-react-native.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/01-react-native.mdx @@ -20,6 +20,7 @@ Please follow the below guides for adding appropriate push providers to Stream: yarn add @react-native-firebase/app yarn add @react-native-firebase/messaging yarn add @react-native-community/push-notification-ios +yarn add @notifee/react-native npx pod-install ``` diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/02-expo.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/02-expo.mdx index 2bdab82b4a..e5d63f1a7d 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/02-expo.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/04-push-notifications/04-other-than-ringing-setup/02-expo.mdx @@ -19,6 +19,7 @@ Please follow the below guides for adding appropriate push providers to Stream: ```bash title=Terminal npx expo install expo-notifications npx expo install expo-task-manager +npx expo install @notifee/react-native ``` So what did we install precisely? diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/08-screensharing/02-setup/01-react-native.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/08-screensharing/02-setup/01-react-native.mdx index 610f3b13b4..713801fb86 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/08-screensharing/02-setup/01-react-native.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/06-advanced/08-screensharing/02-setup/01-react-native.mdx @@ -19,7 +19,6 @@ To be able to use the foreground service, the permission must be declared in the - // highlight-next-line ``` diff --git a/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidManifest.test.ts b/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidManifest.test.ts index bda4849149..b02006bdc2 100644 --- a/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidManifest.test.ts +++ b/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidManifest.test.ts @@ -35,6 +35,9 @@ const getMainActivityOrThrow = AndroidConfig.Manifest.getMainActivityOrThrow; const sampleManifestPath = getFixturePath('AndroidManifest.xml'); const props: ConfigProps = { + ringingPushNotifications: { + disableVideoIos: false, + }, androidPictureInPicture: { enableAutomaticEnter: true, }, diff --git a/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidPermissions.test.ts b/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidPermissions.test.ts index 5301a3594e..9be3c33dca 100644 --- a/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidPermissions.test.ts +++ b/packages/react-native-sdk/expo-config-plugin/__tests__/withAndroidPermissions.test.ts @@ -14,6 +14,7 @@ describe('withStreamVideoReactNativeSDKAndroidPermissions', () => { }; const props: ConfigProps = { enableScreenshare: true, + ringingPushNotifications: { disableVideoIos: false }, }; const updatedConfig = withStreamVideoReactNativeSDKAndroidPermissions( diff --git a/packages/react-native-sdk/expo-config-plugin/src/withAndroidManifest.ts b/packages/react-native-sdk/expo-config-plugin/src/withAndroidManifest.ts index b6ced3b1f7..0ef7f9a60d 100644 --- a/packages/react-native-sdk/expo-config-plugin/src/withAndroidManifest.ts +++ b/packages/react-native-sdk/expo-config-plugin/src/withAndroidManifest.ts @@ -16,12 +16,11 @@ type ManifestService = Unpacked< >; function getNotifeeService() { - /* Example: + /* We add this service to the AndroidManifest.xml: + android:foregroundServiceType="dataSync" /> */ const foregroundServiceType = 'dataSync'; let head = prefixAndroidKeys({ @@ -40,10 +39,10 @@ const withStreamVideoReactNativeSDKManifest: ConfigPlugin = ( props ) => { return withAndroidManifest(configuration, (config) => { - try { - const androidManifest = config.modResults; - const mainApplication = getMainApplicationOrThrow(androidManifest); - /* Add the notifee Service */ + const androidManifest = config.modResults; + const mainApplication = getMainApplicationOrThrow(androidManifest); + if (props?.ringingPushNotifications) { + /* Add the notifee foreground Service */ let services = mainApplication.service ?? []; // we filter out the existing notifee service (if any) so that we can override it services = services.filter( @@ -52,39 +51,32 @@ const withStreamVideoReactNativeSDKManifest: ConfigPlugin = ( ); services.push(getNotifeeService()); mainApplication.service = services; + } - if (props?.androidPictureInPicture) { - const mainActivity = getMainActivityOrThrow(androidManifest); - ('keyboard|keyboardHidden|orientation|screenSize|uiMode'); - const currentConfigChangesArray = mainActivity.$[ - 'android:configChanges' - ] - ? mainActivity.$['android:configChanges'].split('|') - : []; - const neededConfigChangesArray = - 'screenSize|smallestScreenSize|screenLayout|orientation'.split('|'); - // Create a Set from the two arrays. - const set = new Set([ - ...currentConfigChangesArray, - ...neededConfigChangesArray, - ]); - const mergedConfigChanges = [...set]; - mainActivity.$['android:configChanges'] = mergedConfigChanges.join('|'); - mainActivity.$['android:supportsPictureInPicture'] = 'true'; - } + if (props?.androidPictureInPicture) { + const mainActivity = getMainActivityOrThrow(androidManifest); + ('keyboard|keyboardHidden|orientation|screenSize|uiMode'); + const currentConfigChangesArray = mainActivity.$['android:configChanges'] + ? mainActivity.$['android:configChanges'].split('|') + : []; + const neededConfigChangesArray = + 'screenSize|smallestScreenSize|screenLayout|orientation'.split('|'); + // Create a Set from the two arrays. + const set = new Set([ + ...currentConfigChangesArray, + ...neededConfigChangesArray, + ]); + const mergedConfigChanges = [...set]; + mainActivity.$['android:configChanges'] = mergedConfigChanges.join('|'); + mainActivity.$['android:supportsPictureInPicture'] = 'true'; + } - if (props?.ringingPushNotifications?.showWhenLockedAndroid) { - const mainActivity = getMainActivityOrThrow(androidManifest); - mainActivity.$['android:showWhenLocked'] = 'true'; - mainActivity.$['android:turnScreenOn'] = 'true'; - } - config.modResults = androidManifest; - } catch (error: any) { - console.log(error); - throw new Error( - 'Cannot setup StreamVideoReactNativeSDK because the AndroidManifest is malformed' - ); + if (props?.ringingPushNotifications?.showWhenLockedAndroid) { + const mainActivity = getMainActivityOrThrow(androidManifest); + mainActivity.$['android:showWhenLocked'] = 'true'; + mainActivity.$['android:turnScreenOn'] = 'true'; } + config.modResults = androidManifest; return config; }); }; diff --git a/packages/react-native-sdk/expo-config-plugin/src/withAndroidPermissions.ts b/packages/react-native-sdk/expo-config-plugin/src/withAndroidPermissions.ts index 4b7191997d..1f0b1fc7aa 100644 --- a/packages/react-native-sdk/expo-config-plugin/src/withAndroidPermissions.ts +++ b/packages/react-native-sdk/expo-config-plugin/src/withAndroidPermissions.ts @@ -4,22 +4,29 @@ import { ConfigProps } from './common/types'; const withStreamVideoReactNativeSDKAndroidPermissions: ConfigPlugin< ConfigProps > = (configuration, props) => { - const foregroundServicePermissions = [ - 'android.permission.FOREGROUND_SERVICE', - 'android.permission.FOREGROUND_SERVICE_DATA_SYNC', - ]; - if (props?.enableScreenshare) { - foregroundServicePermissions.push( - 'android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION' - ); - } - const config = AndroidConfig.Permissions.withPermissions(configuration, [ - 'android.permission.POST_NOTIFICATIONS', - ...foregroundServicePermissions, + const permissions = [ 'android.permission.BLUETOOTH', 'android.permission.BLUETOOTH_CONNECT', 'android.permission.BLUETOOTH_ADMIN', - ]); + ]; + if (props?.ringingPushNotifications || props?.enableScreenshare) { + permissions.push( + 'android.permission.POST_NOTIFICATIONS', + 'android.permission.FOREGROUND_SERVICE' + ); + if (props?.ringingPushNotifications) { + permissions.push('android.permission.FOREGROUND_SERVICE_DATA_SYNC'); + } + if (props?.enableScreenshare) { + permissions.push( + 'android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION' + ); + } + } + const config = AndroidConfig.Permissions.withPermissions( + configuration, + permissions + ); return config; }; diff --git a/packages/react-native-sdk/expo-config-plugin/src/withMainActivity.ts b/packages/react-native-sdk/expo-config-plugin/src/withMainActivity.ts index 365682d7a9..f22f6433fe 100644 --- a/packages/react-native-sdk/expo-config-plugin/src/withMainActivity.ts +++ b/packages/react-native-sdk/expo-config-plugin/src/withMainActivity.ts @@ -13,39 +13,33 @@ const withStreamVideoReactNativeSDKMainActivity: ConfigPlugin = ( return withMainActivity(configuration, (config) => { const isMainActivityJava = config.modResults.language === 'java'; - try { - config.modResults.contents = addImports( + config.modResults.contents = addImports( + config.modResults.contents, + [ + 'com.streamvideo.reactnative.StreamVideoReactNative', + 'android.os.Build', + 'android.util.Rational', + 'androidx.lifecycle.Lifecycle', + 'android.app.PictureInPictureParams', + 'com.oney.WebRTCModule.WebRTCModuleOptions', + ], + isMainActivityJava + ); + config.modResults.contents = addOnPictureInPictureModeChanged( + config.modResults.contents, + isMainActivityJava + ); + if (props?.androidPictureInPicture?.enableAutomaticEnter) { + config.modResults.contents = addOnUserLeaveHint( config.modResults.contents, - [ - 'com.streamvideo.reactnative.StreamVideoReactNative', - 'android.os.Build', - 'android.util.Rational', - 'androidx.lifecycle.Lifecycle', - 'android.app.PictureInPictureParams', - 'com.oney.WebRTCModule.WebRTCModuleOptions', - ], isMainActivityJava ); - config.modResults.contents = addOnPictureInPictureModeChanged( + } + if (props?.enableScreenshare) { + config.modResults.contents = addInsideOnCreate( config.modResults.contents, isMainActivityJava ); - if (props?.androidPictureInPicture?.enableAutomaticEnter) { - config.modResults.contents = addOnUserLeaveHint( - config.modResults.contents, - isMainActivityJava - ); - } - if (props?.enableScreenshare) { - config.modResults.contents = addInsideOnCreate( - config.modResults.contents, - isMainActivityJava - ); - } - } catch (error: any) { - throw new Error( - "Cannot add StreamVideoReactNativeSDK to the project's MainApplication because it's malformed." - ); } return config; diff --git a/packages/react-native-sdk/jest-setup.ts b/packages/react-native-sdk/jest-setup.ts index e9d83f4329..5fcb97a886 100644 --- a/packages/react-native-sdk/jest-setup.ts +++ b/packages/react-native-sdk/jest-setup.ts @@ -27,6 +27,10 @@ jest.mock('react-native/Libraries/Utilities/Platform', () => ({ OS: 'ios', select: jest.fn((selector) => selector.ios), Version: '16.2', + constants: { + osVersion: '16.2', + systemName: 'iOS', + }, })); // Mock the notifee module using the mock provided by @notifee/react-native itself diff --git a/packages/react-native-sdk/package.json b/packages/react-native-sdk/package.json index 141a6bbdff..27d080c8e9 100644 --- a/packages/react-native-sdk/package.json +++ b/packages/react-native-sdk/package.json @@ -17,7 +17,7 @@ "build:expo-plugin": "rimraf expo-config-plugin/dist && tsc --project expo-config-plugin/tsconfig.json", "build": "yarn clean && yarn copy-version && bob build && yarn build:expo-plugin", "test:expo-plugin": "jest expo-config-plugin --coverage", - "test": "jest --coverage && yarn test:expo-plugin", + "test": "yarn copy-version && jest --coverage && yarn test:expo-plugin", "copy-version": "echo \"export const version = '$npm_package_version';\" > ./src/version.ts" }, "files": [ @@ -75,6 +75,9 @@ "react-native-voip-push-notification": ">=3.3.1" }, "peerDependenciesMeta": { + "@notifee/react-native": { + "optional": true + }, "@react-native-community/push-notification-ios": { "optional": true }, diff --git a/packages/react-native-sdk/src/hooks/useAndroidKeepCallAliveEffect.ts b/packages/react-native-sdk/src/hooks/useAndroidKeepCallAliveEffect.ts index 5d51e4fb6b..9cad00df62 100644 --- a/packages/react-native-sdk/src/hooks/useAndroidKeepCallAliveEffect.ts +++ b/packages/react-native-sdk/src/hooks/useAndroidKeepCallAliveEffect.ts @@ -1,15 +1,19 @@ import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings'; import { useEffect, useRef } from 'react'; -import notifee, { AuthorizationStatus } from '@notifee/react-native'; import { StreamVideoRN } from '../utils'; import { Platform } from 'react-native'; import { CallingState, getLogger } from '@stream-io/video-client'; +import { getNotifeeLibNoThrowForKeepCallAlive } from '../utils/push/libs/notifee'; const isAndroid7OrBelow = Platform.OS === 'android' && Platform.Version < 26; +const notifeeLib = isAndroid7OrBelow + ? getNotifeeLibNoThrowForKeepCallAlive() + : undefined; + function setForegroundService() { if (!isAndroid7OrBelow) return; - notifee.registerForegroundService(() => { + notifeeLib?.default.registerForegroundService(() => { return new Promise(() => { const logger = getLogger(['setForegroundService method']); logger('info', 'Foreground service running for call in progress'); @@ -23,8 +27,11 @@ async function startForegroundService(call_cid: string) { const { title, body } = foregroundServiceConfig.android.notificationTexts; // request for notification permission and then start the foreground service - const settings = await notifee.getNotificationSettings(); - if (settings.authorizationStatus !== AuthorizationStatus.AUTHORIZED) { + if (!notifeeLib) return; + const settings = await notifeeLib.default.getNotificationSettings(); + if ( + settings.authorizationStatus !== notifeeLib.AuthorizationStatus.AUTHORIZED + ) { const logger = getLogger(['startForegroundService']); logger( 'info', @@ -32,7 +39,7 @@ async function startForegroundService(call_cid: string) { ); return; } - await notifee.displayNotification({ + await notifeeLib.default.displayNotification({ id: call_cid, title, body, @@ -69,6 +76,7 @@ export const useAndroidKeepCallAliveEffect = () => { const callingState = useCallCallingState(); useEffect((): (() => void) | undefined => { + if (!notifeeLib) return; if (Platform.OS === 'ios' || !activeCallCid) { return; } @@ -79,6 +87,7 @@ export const useAndroidKeepCallAliveEffect = () => { if (foregroundServiceStartedRef.current) { return; } + const notifee = notifeeLib.default; notifee.getDisplayedNotifications().then((displayedNotifications) => { const activeCallNotification = displayedNotifications.find( (notification) => notification.id === activeCallCid @@ -99,7 +108,7 @@ export const useAndroidKeepCallAliveEffect = () => { // cancel any notifee displayed notification when the call has transitioned out of ringing return () => { // cancels the non fg service notifications - notifee.cancelDisplayedNotification(activeCallCid); + notifeeLib.default.cancelDisplayedNotification(activeCallCid); }; } else if ( callingState === CallingState.IDLE || @@ -107,18 +116,20 @@ export const useAndroidKeepCallAliveEffect = () => { ) { if (foregroundServiceStartedRef.current) { // stop foreground service when the call is not active - notifee.stopForegroundService(); + notifeeLib.default.stopForegroundService(); foregroundServiceStartedRef.current = false; } else { - notifee.getDisplayedNotifications().then((displayedNotifications) => { - const activeCallNotification = displayedNotifications.find( - (notification) => notification.id === activeCallCid - ); - if (activeCallNotification) { - // this means that we have a incoming call notification shown as foreground service and we must stop it - notifee.stopForegroundService(); - } - }); + notifeeLib.default + .getDisplayedNotifications() + .then((displayedNotifications) => { + const activeCallNotification = displayedNotifications.find( + (notification) => notification.id === activeCallCid + ); + if (activeCallNotification) { + // this means that we have a incoming call notification shown as foreground service and we must stop it + notifeeLib.default.stopForegroundService(); + } + }); } } }, [activeCallCid, callingState]); @@ -127,7 +138,8 @@ export const useAndroidKeepCallAliveEffect = () => { return () => { // stop foreground service when this effect is unmounted if (foregroundServiceStartedRef.current) { - notifee.stopForegroundService(); + if (!notifeeLib) return; + notifeeLib.default.stopForegroundService(); foregroundServiceStartedRef.current = false; } }; diff --git a/packages/react-native-sdk/src/utils/StreamVideoRN/types.ts b/packages/react-native-sdk/src/utils/StreamVideoRN/types.ts index 872be90b50..1323569591 100644 --- a/packages/react-native-sdk/src/utils/StreamVideoRN/types.ts +++ b/packages/react-native-sdk/src/utils/StreamVideoRN/types.ts @@ -1,5 +1,5 @@ import { StreamVideoClient } from '@stream-io/video-client'; -import { AndroidChannel } from '@notifee/react-native'; +import type { AndroidChannel } from '@notifee/react-native'; export type NonRingingPushEvent = 'call.live_started' | 'call.notification'; diff --git a/packages/react-native-sdk/src/utils/push/android.ts b/packages/react-native-sdk/src/utils/push/android.ts index 970a4e106a..827cfe0f50 100644 --- a/packages/react-native-sdk/src/utils/push/android.ts +++ b/packages/react-native-sdk/src/utils/push/android.ts @@ -1,8 +1,3 @@ -import notifee, { - EventType, - Event, - AndroidCategory, -} from '@notifee/react-native'; import { FirebaseMessagingTypes } from '@react-native-firebase/messaging'; import { Call, @@ -20,6 +15,8 @@ import { getFirebaseMessagingLibNoThrow, getExpoNotificationsLib, getExpoTaskManagerLib, + getNotifeeLibThrowIfNotInstalledForPush, + NotifeeLib, } from './libs'; import { pushAcceptedIncomingCallCId$, @@ -43,6 +40,14 @@ const DECLINE_CALL_ACTION_ID = 'decline'; type PushConfig = NonNullable; +type onBackgroundEventFunctionParams = Parameters< + NotifeeLib['default']['onBackgroundEvent'] +>[0]; + +type Event = Parameters[0]; + +// EventType = NotifeeLib['EventType']; + /** Setup Firebase push message handler **/ export function setupFirebaseHandlerAndroid(pushConfig: PushConfig) { if (Platform.OS !== 'android') { @@ -114,6 +119,8 @@ export function setupFirebaseHandlerAndroid(pushConfig: PushConfig) { } // the notification tap handlers are always registered with notifee for both expo and non-expo in android + const notifeeLib = getNotifeeLibThrowIfNotInstalledForPush(); + const notifee = notifeeLib.default; notifee.onBackgroundEvent(async (event) => { await onNotifeeEvent(event, pushConfig, true); }); @@ -208,6 +215,9 @@ const firebaseMessagingOnMessageHandler = async ( AppState.currentState !== 'active'; const asForegroundService = canListenToWS(); + const notifeeLib = getNotifeeLibThrowIfNotInstalledForPush(); + const notifee = notifeeLib.default; + if (asForegroundService) { // Listen to call events from WS through fg service // note: this will replace the current empty fg service runner @@ -291,7 +301,7 @@ const firebaseMessagingOnMessageHandler = async ( }, }, ], - category: AndroidCategory.CALL, + category: notifeeLib.AndroidCategory.CALL, fullScreenAction: { id: 'stream_ringing_incoming_call', }, @@ -316,6 +326,8 @@ const firebaseMessagingOnMessageHandler = async ( return; } } else { + const notifeeLib = getNotifeeLibThrowIfNotInstalledForPush(); + const notifee = notifeeLib.default; // the other types are call.live_started and call.notification const callChannel = pushConfig.android.callChannel; const callNotificationTextGetters = @@ -376,18 +388,24 @@ const onNotifeeEvent = async ( pushAcceptedIncomingCallCId$.observed && pushRejectedIncomingCallCId$.observed; + const notifeeLib = getNotifeeLibThrowIfNotInstalledForPush(); + const notifee = notifeeLib.default; // Check if we need to decline the call const didPressDecline = - type === EventType.ACTION_PRESS && + type === notifeeLib.EventType.ACTION_PRESS && pressAction?.id === DECLINE_CALL_ACTION_ID; - const didDismiss = type === EventType.DISMISSED; + const didDismiss = type === notifeeLib.EventType.DISMISSED; const mustDecline = didPressDecline || didDismiss; // Check if we need to accept the call const mustAccept = - type === EventType.ACTION_PRESS && + type === notifeeLib.EventType.ACTION_PRESS && pressAction?.id === ACCEPT_CALL_ACTION_ID; - if (mustAccept || mustDecline || type === EventType.ACTION_PRESS) { + if ( + mustAccept || + mustDecline || + type === notifeeLib.EventType.ACTION_PRESS + ) { clearPushWSEventSubscriptions(); notifee.stopForegroundService(); } @@ -403,16 +421,17 @@ const onNotifeeEvent = async ( } await processCallFromPushInBackground(pushConfig, call_cid, 'decline'); } else { - if (type === EventType.PRESS) { + if (type === notifeeLib.EventType.PRESS) { pushTappedIncomingCallCId$.next(call_cid); // pressed state will be handled by the app with rxjs observers as the app will go to foreground always - } else if (isBackground && type === EventType.DELIVERED) { + } else if (isBackground && type === notifeeLib.EventType.DELIVERED) { pushAndroidBackgroundDeliveredIncomingCallCId$.next(call_cid); // background delivered state will be handled by the app with rxjs observers as processing needs to happen only when app is opened } } } else { - if (type === EventType.PRESS) { + const notifeeLib = getNotifeeLibThrowIfNotInstalledForPush(); + if (type === notifeeLib.EventType.PRESS) { pushTappedIncomingCallCId$.next(call_cid); pushConfig.onTapNonRingingCallNotification?.( call_cid, diff --git a/packages/react-native-sdk/src/utils/push/ios.ts b/packages/react-native-sdk/src/utils/push/ios.ts index 62d6c7303e..4fab00ab42 100644 --- a/packages/react-native-sdk/src/utils/push/ios.ts +++ b/packages/react-native-sdk/src/utils/push/ios.ts @@ -14,10 +14,13 @@ import { clearPushWSEventSubscriptions, processCallFromPushInBackground, } from './utils'; -import { getExpoNotificationsLib, getPushNotificationIosLib } from './libs'; +import { + getExpoNotificationsLib, + getNotifeeLibThrowIfNotInstalledForPush, + getPushNotificationIosLib, +} from './libs'; import { StreamVideoClient, getLogger } from '@stream-io/video-client'; import { setPushLogoutCallback } from '../internal/pushLogoutCallback'; -import notifee, { EventType } from '@notifee/react-native'; type PushConfig = NonNullable; @@ -96,8 +99,10 @@ export const setupRemoteNotificationsHandleriOS = (pushConfig: PushConfig) => { if (Platform.OS !== 'ios') { return; } - notifee.onForegroundEvent(({ type, detail }) => { - if (type === EventType.PRESS) { + const notifeeLib = getNotifeeLibThrowIfNotInstalledForPush(); + + notifeeLib.default.onForegroundEvent(({ type, detail }) => { + if (type === notifeeLib.EventType.PRESS) { const streamPayload = detail.notification?.data?.stream as | StreamPayload | undefined; diff --git a/packages/react-native-sdk/src/utils/push/libs/index.ts b/packages/react-native-sdk/src/utils/push/libs/index.ts index 58daa12f5a..74ff5fa2a6 100644 --- a/packages/react-native-sdk/src/utils/push/libs/index.ts +++ b/packages/react-native-sdk/src/utils/push/libs/index.ts @@ -4,6 +4,7 @@ export * from './firebaseMessaging'; export * from './iosPushNotification'; export * from './voipPushNotification'; export * from './callkeep'; +export * from './notifee'; /* NOTE: must keep each libs in different files diff --git a/packages/react-native-sdk/src/utils/push/libs/notifee.ts b/packages/react-native-sdk/src/utils/push/libs/notifee.ts new file mode 100644 index 0000000000..b69453dce3 --- /dev/null +++ b/packages/react-native-sdk/src/utils/push/libs/notifee.ts @@ -0,0 +1,33 @@ +import { getLogger } from '../../..'; + +export type NotifeeLib = typeof import('@notifee/react-native'); + +let notifeeLib: NotifeeLib | undefined; + +try { + notifeeLib = require('@notifee/react-native'); +} catch (_e) {} + +const INSTALLATION_INSTRUCTION = + 'Please see https://notifee.app/react-native/docs/installation for installation instructions'; + +export function getNotifeeLibThrowIfNotInstalledForPush() { + if (!notifeeLib) { + throw Error( + '@notifee/react-native is not installed. It is required for implementing push notifications. ' + + INSTALLATION_INSTRUCTION + ); + } + return notifeeLib; +} + +export function getNotifeeLibNoThrowForKeepCallAlive() { + if (!notifeeLib) { + const logger = getLogger(['getNotifeeLibNoThrow']); + logger( + 'info', + `${'@notifee/react-native library not installed. It is required to keep call alive in the background for Android < 26. '}${INSTALLATION_INSTRUCTION}` + ); + } + return notifeeLib; +} diff --git a/yarn.lock b/yarn.lock index 87883156b1..398c4015ac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7326,6 +7326,8 @@ __metadata: react-native-svg: ">=13.6.0" react-native-voip-push-notification: ">=3.3.1" peerDependenciesMeta: + "@notifee/react-native": + optional: true "@react-native-community/push-notification-ios": optional: true "@react-native-firebase/app":