@sendbird/uikit-react-native 3.10.3 → 3.11.1

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/platform/createRecorderService.native.d.ts

@@ -1,9 +1,11 @@
-import * as RNAudioRecorder from 'react-native-audio-recorder-player';
+import type * as LegacyModule from 'react-native-audio-recorder-player';
+import type * as NitroSoundOrLegacyV4Module from 'react-native-nitro-sound';
 import * as Permissions from 'react-native-permissions';
 import type { RecorderServiceInterface } from './types';
+export type AudioRecorderModule = typeof LegacyModule | typeof NitroSoundOrLegacyV4Module;
 type Modules = {
-    audioRecorderModule: typeof RNAudioRecorder;
+    audioRecorderModule: AudioRecorderModule;
     permissionModule: typeof Permissions;
 };
-declare const createNativeRecorderService: ({ audioRecorderModule, permissionModule }: Modules) => RecorderServiceInterface;
+declare const createNativeRecorderService: (modules: Modules) => RecorderServiceInterface;
 export default createNativeRecorderService;

package/lib/typescript/src/platform/types.d.ts

@@ -191,4 +191,8 @@ export interface RecorderServiceInterface {
      *   [*] to [idle]
      * */
     reset(): Promise<void>;
+    /**
+     * Get the record path processed for the specific platform and adapter.
+     * */
+    convertRecordPath(uri: string): string;
 }

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.10.3";
+declare const VERSION = "3.11.1";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.10.3",
+  "version": "3.11.1",
   "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.10.3",
-    "@sendbird/uikit-react-native-foundation": "3.10.3",
+    "@sendbird/uikit-chat-hooks": "3.11.1",
+    "@sendbird/uikit-react-native-foundation": "3.11.1",
     "@sendbird/uikit-tools": "0.0.15",
-    "@sendbird/uikit-utils": "3.10.3"
+    "@sendbird/uikit-utils": "3.11.1"
   },
   "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",
@@ -98,6 +101,8 @@
     "react-native-file-access": "^3.1.0",
     "react-native-image-picker": "^7.1.2",
     "react-native-mmkv": "^2.12.2",
+    "react-native-nitro-modules": "^0.29.4",
+    "react-native-nitro-sound": "^0.2.0",
     "react-native-permissions": "^3.10.1",
     "react-native-safe-area-context": "^4.10.8",
     "react-native-video": "^6.3.0",
@@ -115,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",
@@ -123,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",
@@ -132,6 +139,8 @@
     "react-native-file-access": ">=2.4.3",
     "react-native-image-picker": ">=4.7.1",
     "react-native-mmkv": ">=2.0.0",
+    "react-native-nitro-modules": "*",
+    "react-native-nitro-sound": ">=0.2.0",
     "react-native-permissions": ">=3.6.0",
     "react-native-safe-area-context": ">=3.3.2",
     "react-native-video": ">=5.2.0"
@@ -161,6 +170,12 @@
     "expo-av": {
       "optional": true
     },
+    "expo-audio": {
+      "optional": true
+    },
+    "expo-video": {
+      "optional": true
+    },
     "expo-clipboard": {
       "optional": true
     },
@@ -202,6 +217,15 @@
     },
     "react-native-video": {
       "optional": true
+    },
+    "react-native-audio-recorder-player": {
+      "optional": true
+    },
+    "react-native-nitro-modules": {
+      "optional": true
+    },
+    "react-native-nitro-sound": {
+      "optional": true
     }
   },
   "react-native-builder-bob": {
@@ -218,5 +242,5 @@
       ]
     ]
   },
-  "gitHead": "2f85a74e995069845ec6876d1339a66b299b642b"
+  "gitHead": "16f1f54e8c442492e79a9591ae32203d5db55c2b"
 }

package/src/components/ChannelInput/VoiceMessageInput.tsx

@@ -75,7 +75,7 @@ const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
           break;
       }
     } catch (error) {
-      Logger.warn('Failed to run voice message action.', state);
+      Logger.warn('Failed to run voice message action.', state, error);
     }
   };
   const renderActionIcon = () => {

package/src/components/ChannelInput/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
-  Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleProp,
@@ -95,12 +94,7 @@ export type ChannelInputProps = {
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const isAndroidApi35Plus = Platform.OS === 'android' && Platform.Version >= 35;
-const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({
-  ios: 'padding' as const,
-  android: isAndroidApi35Plus ? ('padding' as const) : undefined,
-  default: undefined,
-});
+const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 
 // FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
 //  To workaround temporarily, change the key for re-mount the component.
@@ -115,16 +109,6 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const safeArea = useSafeAreaPadding(['top', 'left', 'right', 'bottom']);
 
-  // Android API 35+ keyboard avoidance handling
-  /**
-   * Android API 35+ introduced edge-to-edge layouts, which changed how keyboard avoidance should be handled.
-   * For API 35+, the system manages insets automatically, so we use the provided keyboardAvoidOffset directly.
-   * For older Android versions, we manually subtract the safe area bottom padding to avoid overlapping with system UI.
-   * See: https://developer.android.com/develop/ui/views/layout/edge-to-edge
-   */
-  const keyboardVerticalOffset = isAndroidApi35Plus
-    ? keyboardAvoidOffset
-    : -safeArea.paddingBottom + keyboardAvoidOffset;
   const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
@@ -161,30 +145,16 @@ const ChannelInput = (props: ChannelInputProps) => {
     onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range });
   };
 
-  const [keyboardShown, setKeyboardShown] = useState(false);
-
-  useEffect(() => {
-    const keyboardDidShow = () => setKeyboardShown(true);
-    const keyboardDidHide = () => setKeyboardShown(false);
-
-    const showSubscription = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  const shouldShowSafeAreaBottom = !isAndroidApi35Plus || (isAndroidApi35Plus && !keyboardShown);
-
   if (!props.shouldRenderInput) {
     return <SafeAreaBottom height={safeArea.paddingBottom} />;
   }
 
   return (
     <>
-      <KeyboardAvoidingView keyboardVerticalOffset={keyboardVerticalOffset} behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={-safeArea.paddingBottom + keyboardAvoidOffset}
+        behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
+      >
         <View
           style={{
             paddingStart: safeArea.paddingStart,
@@ -224,7 +194,7 @@ const ChannelInput = (props: ChannelInputProps) => {
               />
             )}
           </View>
-          {shouldShowSafeAreaBottom && <SafeAreaBottom height={safeArea.paddingBottom} />}
+          <SafeAreaBottom height={safeArea.paddingBottom} />
         </View>
       </KeyboardAvoidingView>
       {mentionAvailable && props.SuggestedMentionList && (

package/src/hooks/useVoiceMessageInput.ts

@@ -161,8 +161,10 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
               setVoiceMessageRecordingPath({ recordFilePath: recorderService.uri, uri: recorderService.uri });
             }
           } else {
-            setVoiceMessageRecordingPath(fileService.createRecordFilePath(recorderService.options.extension));
-            await recorderService.record(getVoiceMessageRecordingPath().recordFilePath);
+            const recordFilePath = fileService.createRecordFilePath(recorderService.options.extension);
+            const convertedRecordPath = recorderService.convertRecordPath(recordFilePath.recordFilePath);
+            setVoiceMessageRecordingPath({ ...recordFilePath, recordFilePath: convertedRecordPath });
+            await recorderService.record(convertedRecordPath);
           }
         }
       },
@@ -225,6 +227,9 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
           matchesOneOf(status, ['recording', 'recording_completed', 'playing', 'playing_paused']) &&
           recordingPath.current
         ) {
+          if (status === 'recording') {
+            await recorderService.stop();
+          }
           const voiceFile = getVoiceMessageFileObject(recordingPath.current.uri, recorderService.options.extension);
           onSend(voiceFile, Math.floor(recordingTime.currentTime));
           await clear();

package/src/platform/createFileService.native.ts

@@ -242,7 +242,7 @@ const createNativeFileService = ({
       return Platform.select({
         ios: {
           uri: path,
-          recordFilePath: filename,
+          recordFilePath: path,
         },
         android: {
           uri: path.startsWith('file://') ? path : 'file://' + path,

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 });