@sendbird/uikit-react-native 3.11.0 → 3.11.2

package/lib/typescript/src/platform/createRecorderService.expo.d.ts

@@ -1,7 +1,7 @@
-import * as ExpoAV from 'expo-av';
+import type { ExpoAudioModule } from '../utils/expoBackwardUtils';
 import type { RecorderServiceInterface } from './types';
 type Modules = {
-    avModule: typeof ExpoAV;
+    avModule: ExpoAudioModule;
 };
 declare const createExpoRecorderService: ({ avModule }: Modules) => RecorderServiceInterface;
 export default createExpoRecorderService;

package/lib/typescript/src/utils/expoBackwardUtils.d.ts

@@ -1,6 +1,9 @@
+import type * as ExpoAudio from 'expo-audio';
+import type * as ExpoAV from 'expo-av';
 import type * as ExpoDocumentPicker from 'expo-document-picker';
 import type * as ExpoFs from 'expo-file-system';
 import type * as ExpoImagePicker from 'expo-image-picker';
+import type * as ExpoVideo from 'expo-video';
 import type { FilePickerResponse } from '../platform/types';
 declare const expoBackwardUtils: {
     imagePicker: {
@@ -11,6 +14,13 @@ declare const expoBackwardUtils: {
         isCanceled(result: ExpoDocumentPicker.DocumentPickerResult): boolean;
         toFilePickerResponses(result: ExpoDocumentPicker.DocumentPickerResult): Promise<FilePickerResponse[]>;
     };
+    expoAV: {
+        isLegacyAVModule(module: ExpoAudioModule | ExpoVideoModule): module is typeof ExpoAV;
+        isAudioModule(module: ExpoAudioModule): module is typeof ExpoAudio;
+        isVideoModule(module: ExpoVideoModule): module is typeof ExpoVideo;
+    };
     toFileSize(info: ExpoFs.FileInfo): number;
 };
+export type ExpoAudioModule = typeof ExpoAV | typeof ExpoAudio;
+export type ExpoVideoModule = typeof ExpoAV | typeof ExpoVideo;
 export default expoBackwardUtils;

package/lib/typescript/src/utils/expoPermissionGranted.d.ts

@@ -7,7 +7,7 @@ export interface ExpoPermissionResponse {
 export interface ExpoMediaLibraryPermissionResponse extends ExpoPermissionResponse {
     accessPrivileges?: 'all' | 'limited' | 'none';
 }
-export interface ExpoPushPermissionResponse extends ExpoPermissionResponse, NotificationPermissionsStatus {
+export interface ExpoPushPermissionResponse extends Omit<ExpoPermissionResponse, 'status'>, NotificationPermissionsStatus {
 }
 declare const expoPermissionGranted: (stats: Array<ExpoMediaLibraryPermissionResponse | ExpoPushPermissionResponse | ExpoPermissionResponse>, limitedCallback?: () => void) => boolean;
 export default expoPermissionGranted;

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.11.0";
+declare const VERSION = "3.11.2";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.11.0",
+  "version": "3.11.2",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,10 +60,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.11.0",
-    "@sendbird/uikit-react-native-foundation": "3.11.0",
+    "@sendbird/uikit-chat-hooks": "3.11.2",
+    "@sendbird/uikit-react-native-foundation": "3.11.2",
     "@sendbird/uikit-tools": "0.0.15",
-    "@sendbird/uikit-utils": "3.11.0"
+    "@sendbird/uikit-utils": "3.11.2"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -77,6 +77,8 @@
     "@types/react": "*",
     "@types/react-native": "*",
     "date-fns": ">=2.28.0",
+    "expo": "^54.0.12",
+    "expo-audio": "^1.0.13",
     "expo-av": "^13.2.1",
     "expo-clipboard": "^4.1.2",
     "expo-document-picker": "^11.5.3",
@@ -85,6 +87,7 @@
     "expo-image-picker": "^14.1.1",
     "expo-media-library": "^16.0.0",
     "expo-notifications": "^0.18.1",
+    "expo-video": "^3.0.11",
     "expo-video-thumbnails": "^7.2.1",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
@@ -117,6 +120,7 @@
     "@sendbird/react-native-scrollview-enhancer": "*",
     "@sendbird/uikit-tools": ">=0.0.10",
     "date-fns": ">=2.28.0",
+    "expo-audio": ">=1.0.0",
     "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
@@ -125,6 +129,7 @@
     "expo-image-picker": ">=12.0.2",
     "expo-media-library": ">=16.0.0",
     "expo-notifications": ">=0.14.1",
+    "expo-video": ">=3.0.0",
     "expo-video-thumbnails": ">=6.4.0",
     "react": ">=17.0.2",
     "react-native": ">=0.65.0",
@@ -165,6 +170,12 @@
     "expo-av": {
       "optional": true
     },
+    "expo-audio": {
+      "optional": true
+    },
+    "expo-video": {
+      "optional": true
+    },
     "expo-clipboard": {
       "optional": true
     },
@@ -231,5 +242,5 @@
       ]
     ]
   },
-  "gitHead": "f0ffc478a073fe16f571a3f298fe101cf8359d4a"
+  "gitHead": "2df681bc6eefb1296d78f33982f3beecd3769c66"
 }

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -256,9 +256,6 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
         lazyScrollToBottom({ animated: true, timeout: 250 });
       }
     },
-    onChannelChanged(channel) {
-      if (isDifferentChannel(channel, props.channel)) return;
-    },
   });
 
   useEffect(() => {

package/src/platform/createMediaService.expo.tsx

@@ -1,34 +1,112 @@
 import type * as ExpoAV from 'expo-av';
 import type * as ExpoFS from 'expo-file-system';
 import type * as ExpoImageManipulator from 'expo-image-manipulator';
+import type { EventSubscription } from 'expo-modules-core';
+import type * as ExpoVideo from 'expo-video';
+import type { StatusChangeEventPayload } from 'expo-video';
 import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
-import React from 'react';
+import React, { useEffect } from 'react';
 
-import { getDownscaleSize } from '@sendbird/uikit-utils';
+import { Logger, getDownscaleSize } from '@sendbird/uikit-utils';
 
 import SBUUtils from '../libs/SBUUtils';
 import expoBackwardUtils from '../utils/expoBackwardUtils';
-import type { MediaServiceInterface } from './types';
+import type { ExpoVideoModule } from '../utils/expoBackwardUtils';
+import type { MediaServiceInterface, VideoProps } from './types';
 
 type Modules = {
-  avModule: typeof ExpoAV;
+  avModule: ExpoVideoModule;
   thumbnailModule: typeof ExpoVideoThumbnail;
   imageManipulator: typeof ExpoImageManipulator;
   fsModule: typeof ExpoFS;
 };
 
+interface VideoModuleAdapter {
+  VideoComponent: React.ComponentType<VideoProps>;
+}
+
+class LegacyExpoAVVideoAdapter implements VideoModuleAdapter {
+  private readonly avModule: typeof ExpoAV;
+  constructor(avModule: typeof ExpoAV) {
+    this.avModule = avModule;
+  }
+
+  VideoComponent = ({ source, resizeMode, onLoad, ...props }: VideoProps) => {
+    // FIXME: type error https://github.com/expo/expo/issues/17101
+    // @ts-ignore
+    return <this.avModule.Video {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} useNativeControls />;
+  };
+}
+
+class ExpoVideoAdapter implements VideoModuleAdapter {
+  constructor(private readonly _videoModule: typeof ExpoVideo) {}
+
+  VideoComponent = ({ source, resizeMode, onLoad, ...props }: VideoProps) => {
+    const player = this._videoModule.useVideoPlayer(source);
+
+    useEffect(() => {
+      if (onLoad && player) {
+        let subscription: EventSubscription | null = null;
+        try {
+          subscription = player.addListener('statusChange', (eventData: StatusChangeEventPayload) => {
+            const { status, error } = eventData;
+            if (status === 'readyToPlay' && !error) {
+              onLoad();
+            }
+          });
+        } catch (error) {
+          const timeout = setTimeout(() => onLoad(), 300);
+          return () => clearTimeout(timeout);
+        }
+
+        return () => {
+          if (subscription) {
+            subscription.remove();
+          }
+        };
+      }
+      return undefined;
+    }, [onLoad, player]);
+
+    const getContentFit = (mode: typeof resizeMode): 'cover' | 'contain' | 'fill' => {
+      switch (mode) {
+        case 'cover':
+          return 'cover';
+        case 'contain':
+          return 'contain';
+        case 'stretch':
+          return 'fill';
+        default:
+          return 'contain';
+      }
+    };
+
+    return React.createElement(this._videoModule.VideoView, {
+      ...props,
+      player,
+      contentFit: getContentFit(resizeMode),
+    });
+  };
+}
+
 const createExpoMediaService = ({
   avModule,
   thumbnailModule,
   imageManipulator,
   fsModule,
 }: Modules): MediaServiceInterface => {
+  if (expoBackwardUtils.expoAV.isLegacyAVModule(avModule)) {
+    Logger.warn(
+      '[MediaService.Expo] expo-av is deprecated and will be removed in Expo 54. Please migrate to expo-video.',
+    );
+  }
+
+  const videoAdapter = expoBackwardUtils.expoAV.isVideoModule(avModule)
+    ? new ExpoVideoAdapter(avModule)
+    : new LegacyExpoAVVideoAdapter(avModule);
+
   return {
-    VideoComponent({ source, resizeMode, onLoad, ...props }) {
-      // FIXME: type error https://github.com/expo/expo/issues/17101
-      // @ts-ignore
-      return <avModule.Video {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} useNativeControls />;
-    },
+    VideoComponent: videoAdapter.VideoComponent,
     async getVideoThumbnail({ url, quality, timeMills }) {
       try {
         const { uri } = await thumbnailModule.getThumbnailAsync(url, { quality, time: timeMills });

package/src/platform/createNotificationService.native.ts

@@ -1,27 +1,64 @@
 import type RNFBMessaging from '@react-native-firebase/messaging';
+import type { FirebaseMessagingTypes } from '@react-native-firebase/messaging';
 import { Platform } from 'react-native';
 import type * as Permissions from 'react-native-permissions';
 
 import type { NotificationServiceInterface } from './types';
 
+// Type definitions for Firebase Messaging Module instance
+// This represents the instance returned by messaging() or getMessaging()
+// We use a type alias to handle both v14 and v22+ types
+type MessagingInstance = ReturnType<typeof RNFBMessaging>;
+
+// Type definitions for modular API support (Firebase v22+)
+// The modular API provides standalone functions that accept a messaging instance
+type ModularMessagingType = {
+  getMessaging: () => MessagingInstance;
+  getAPNSToken: (messaging: MessagingInstance) => Promise<string | null>;
+  getToken: (messaging: MessagingInstance) => Promise<string>;
+  hasPermission: (messaging: MessagingInstance) => Promise<FirebaseMessagingTypes.AuthorizationStatus>;
+  requestPermission: (
+    messaging: MessagingInstance,
+    iosPermissions?: FirebaseMessagingTypes.IOSPermissions,
+  ) => Promise<FirebaseMessagingTypes.AuthorizationStatus>;
+  onTokenRefresh: (messaging: MessagingInstance, listener: (token: string) => void) => () => void;
+  AuthorizationStatus: typeof RNFBMessaging.AuthorizationStatus;
+};
+
+// Create a flexible type that can handle both v14 and v22+ Firebase modules
+type FirebaseMessagingModule = typeof RNFBMessaging | ModularMessagingType;
+
+const isModularAPI = (module: FirebaseMessagingModule): module is ModularMessagingType => {
+  return typeof (module as ModularMessagingType).getMessaging === 'function';
+};
+
 const createNativeNotificationService = ({
   messagingModule,
   permissionModule,
 }: {
-  messagingModule: typeof RNFBMessaging;
+  messagingModule: FirebaseMessagingModule;
   permissionModule: typeof Permissions;
 }): NotificationServiceInterface => {
-  const module = messagingModule();
+  const isModular = isModularAPI(messagingModule);
+  const modularMessaging = isModular ? (messagingModule as ModularMessagingType) : null;
+  const messaging = isModular ? modularMessaging!.getMessaging() : (messagingModule as typeof RNFBMessaging)();
+
   const authorizedStatus = [
     messagingModule.AuthorizationStatus.AUTHORIZED,
     messagingModule.AuthorizationStatus.PROVISIONAL,
   ];
   return {
     getAPNSToken(): Promise<string | null> {
-      return module.getAPNSToken();
+      if (modularMessaging) {
+        return modularMessaging.getAPNSToken(messaging);
+      }
+      return messaging.getAPNSToken();
     },
     getFCMToken(): Promise<string | null> {
-      return module.getToken();
+      if (modularMessaging) {
+        return modularMessaging.getToken(messaging);
+      }
+      return messaging.getToken();
     },
     async hasPushPermission(): Promise<boolean> {
       if (Platform.OS === 'android') {
@@ -30,7 +67,9 @@ const createNativeNotificationService = ({
       }
 
       if (Platform.OS === 'ios') {
-        const status = await module.hasPermission();
+        const status = modularMessaging
+          ? await modularMessaging.hasPermission(messaging)
+          : await messaging.hasPermission();
         return authorizedStatus.includes(status);
       }
 
@@ -43,14 +82,21 @@ const createNativeNotificationService = ({
       }
 
       if (Platform.OS === 'ios') {
-        const status = await module.requestPermission();
+        const status = modularMessaging
+          ? await modularMessaging.requestPermission(messaging)
+          : await messaging.requestPermission();
         return authorizedStatus.includes(status);
       }
 
       return false;
     },
     onTokenRefresh(handler: (token: string) => void): () => void | undefined {
-      return module.onTokenRefresh((token) => {
+      if (modularMessaging) {
+        return modularMessaging.onTokenRefresh(messaging, (token: string) => {
+          if (Platform.OS === 'android') handler(token);
+        });
+      }
+      return messaging.onTokenRefresh((token: string) => {
         if (Platform.OS === 'android') handler(token);
       });
     },