@sendbird/uikit-react-native 3.6.0 → 3.7.1

package/lib/typescript/src/hooks/useChannelInputItems.d.ts

@@ -1,7 +1,7 @@
 import { SendbirdChannel } from '@sendbird/uikit-utils';
 import { FileType } from '../platform/types';
 export declare const useChannelInputItems: (channel: SendbirdChannel, sendFileMessage: (file: FileType) => void) => {
-    icon?: "search" | "stop" | "photo" | "recording" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive" | undefined;
+    icon?: "search" | "stop" | "photo" | "recording" | "delete" | "message" | "done" | "user" | "add" | "chat-hide" | "chat-show" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive" | undefined;
     iconColor?: string | undefined;
     title: string;
     titleColor?: string | undefined;

package/lib/typescript/src/libs/InternalLocalCacheStorage.d.ts

@@ -1,8 +1,9 @@
-import type { KeyValuePairGet, KeyValuePairSet, LocalCacheStorage } from '../types';
-export default class InternalLocalCacheStorage implements LocalCacheStorage {
-    private storage;
+import type { AsyncLocalCacheStorage, KeyValuePairGet, KeyValuePairSet, LocalCacheStorage } from '../types';
+export default class InternalLocalCacheStorage implements AsyncLocalCacheStorage {
+    private readonly _mmkv?;
+    private readonly _async?;
     constructor(storage: LocalCacheStorage);
-    getAllKeys(): Promise<readonly string[] | string[]>;
+    getAllKeys(): Promise<readonly string[]>;
     getItem(key: string): Promise<string | null>;
     removeItem(key: string): Promise<void>;
     setItem(key: string, value: string): Promise<void>;

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

@@ -1,8 +1,10 @@
 import type { ComponentType, ErrorInfo, ReactNode } from 'react';
+import type { MMKV } from 'react-native-mmkv';
 import type { SendbirdUser } from '@sendbird/uikit-utils';
+export type LocalCacheStorage = AsyncLocalCacheStorage | MMKVLocalCacheStorage;
 export type KeyValuePairGet = [string, string | null];
 export type KeyValuePairSet = [string, string];
-export interface LocalCacheStorage {
+export interface AsyncLocalCacheStorage {
     getAllKeys(): Promise<readonly string[] | string[]>;
     getItem(key: string): Promise<string | null>;
     setItem(key: string, value: string): Promise<void>;
@@ -11,6 +13,7 @@ export interface LocalCacheStorage {
     multiGet?(keys: string[]): Promise<readonly KeyValuePairGet[] | KeyValuePairGet[]>;
     multiRemove?(keys: string[]): Promise<void>;
 }
+export type MMKVLocalCacheStorage = Pick<MMKV, 'getString' | 'set' | 'delete' | 'getAllKeys'>;
 export type ErrorBoundaryProps = {
     error: Error;
     errorInfo: ErrorInfo;

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

@@ -1,2 +1,2 @@
-declare const VERSION = "3.6.0";
+declare const VERSION = "3.7.1";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.6.0",
+  "version": "3.7.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,22 +60,21 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.6.0",
-    "@sendbird/uikit-react-native-foundation": "3.6.0",
+    "@sendbird/uikit-chat-hooks": "3.7.1",
+    "@sendbird/uikit-react-native-foundation": "3.7.1",
     "@sendbird/uikit-tools": "0.0.1-alpha.77",
-    "@sendbird/uikit-utils": "3.6.0"
+    "@sendbird/uikit-utils": "3.7.1"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
-    "@react-native-camera-roll/camera-roll": "^5.4.0",
-    "@react-native-clipboard/clipboard": "^1.8.5",
-    "@react-native-community/netinfo": "^9.3.0",
+    "@react-native-async-storage/async-storage": "^1.17.6",
+    "@react-native-camera-roll/camera-roll": "^7.8.1",
+    "@react-native-clipboard/clipboard": "^1.14.1",
+    "@react-native-community/netinfo": "^11.3.2",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
-    "@sendbird/react-native-scrollview-enhancer": "^0.2.1",
     "@types/react": "*",
     "@types/react-native": "*",
-    "@types/react-native-video": "^5.0.14",
     "date-fns": "^2.28.0",
     "expo-av": "^13.2.1",
     "expo-clipboard": "^4.1.2",
@@ -89,26 +88,28 @@
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
-    "react": "17.0.2",
-    "react-native": "0.67.5",
-    "react-native-audio-recorder-player": "^3.6.0",
+    "react": "18.2.0",
+    "react-native": "0.74.3",
+    "react-native-audio-recorder-player": "^3.6.10",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-create-thumbnail": "^1.5.1",
-    "react-native-document-picker": "^8.0.0",
-    "react-native-file-access": "^2.5.0",
-    "react-native-image-picker": "^4.7.1",
-    "react-native-permissions": "^3.6.0",
-    "react-native-safe-area-context": "^3.3.2",
-    "react-native-video": "^5.2.0",
+    "react-native-create-thumbnail": "^2.0.0",
+    "react-native-document-picker": "^9.3.0",
+    "react-native-file-access": "^3.1.0",
+    "react-native-image-picker": "^7.1.2",
+    "react-native-mmkv": "^2.12.2",
+    "react-native-permissions": "^3.10.1",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-video": "^6.3.0",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
     "@bam.tech/react-native-image-resizer": ">=3.0.0",
+    "@react-native-async-storage/async-storage": "^1.17.6",
     "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.10.7",
+    "@sendbird/chat": "^4.12.9",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -126,6 +127,7 @@
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
     "react-native-image-picker": ">=4.7.1",
+    "react-native-mmkv": "^2.0.0",
     "react-native-permissions": ">=3.6.0",
     "react-native-safe-area-context": ">=3.3.2",
     "react-native-video": ">=5.2.0"
@@ -134,6 +136,9 @@
     "@bam.tech/react-native-image-resizer": {
       "optional": true
     },
+    "@react-native-async-storage/async-storage": {
+      "optional": true
+    },
     "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
@@ -203,5 +208,5 @@
       ]
     ]
   },
-  "gitHead": "74380f45cc34ef2d9f8a6b7f5cb9144329457c5b"
+  "gitHead": "9d1b5148c4af415c985566bddb45a20c97b365fd"
 }

package/src/containers/SendbirdUIKitContainer.tsx

@@ -1,5 +1,7 @@
+import type { AsyncStorageStatic } from '@react-native-async-storage/async-storage';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
+import type { MMKV } from 'react-native-mmkv';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import SendbirdChat, { DeviceOsPlatform, SendbirdChatParams, SendbirdPlatform, SendbirdProduct } from '@sendbird/chat';
@@ -15,15 +17,17 @@ import {
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
 import { SBUConfig, UIKitConfigProvider } from '@sendbird/uikit-tools';
-import type {
+import {
+  Logger,
+  NOOP,
   PartialDeep,
   SendbirdChatSDK,
   SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
   SendbirdUser,
+  useIsFirstMount,
 } from '@sendbird/uikit-utils';
-import { NOOP, useIsFirstMount } from '@sendbird/uikit-utils';
 
 import { LocalizationContext, LocalizationProvider } from '../contexts/LocalizationCtx';
 import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
@@ -50,7 +54,7 @@ import type {
   PlayerServiceInterface,
   RecorderServiceInterface,
 } from '../platform/types';
-import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
+import { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 import VERSION from '../version';
 import InternalErrorBoundaryContainer from './InternalErrorBoundaryContainer';
 
@@ -78,13 +82,13 @@ const chatOmitKeys = [
   'appVersion',
   'localCacheEnabled',
   'useAsyncStorageStore',
+  'useMMKVStorageStore',
 ] as const;
 function sanitizeChatOptions<T extends Record<string, unknown>>(chatOptions: T): T {
   const opts = { ...chatOptions };
   chatOmitKeys.forEach((key) => delete opts[key]);
   return opts;
 }
-
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   appId: string;
   platformServices: {
@@ -95,11 +99,11 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     player: PlayerServiceInterface;
     recorder: RecorderServiceInterface;
   };
-  chatOptions: {
-    localCacheStorage: LocalCacheStorage;
-    onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
-  } & Partial<ChatOmittedInitParams> &
-    Partial<ChatRelatedFeaturesInUIKit>;
+  chatOptions: Partial<ChatOmittedInitParams> &
+    Partial<ChatRelatedFeaturesInUIKit> & {
+      onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
+      localCacheStorage: LocalCacheStorage;
+    };
   uikitOptions?: PartialDeep<{
     common: SBUConfig['common'];
     groupChannel: Omit<SBUConfig['groupChannel']['channel'], 'enableReactionsSupergroup'> & {
@@ -162,6 +166,10 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
 
   if (!chatOptions.localCacheStorage) {
     throw new Error('SendbirdUIKitContainer: chatOptions.localCacheStorage is required');
+  } else if ('getItem' in chatOptions.localCacheStorage) {
+    Logger.warn(
+      'SendbirdUIKitContainer: localCacheStorage for `AsyncStorage` is deprecated. Please use `MMKV` instead.',
+    );
   }
 
   const defaultStringSet = localization?.stringSet ?? StringSetEn;
@@ -171,7 +179,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
 
   const [internalStorage] = useState(() => new InternalLocalCacheStorage(chatOptions.localCacheStorage));
   const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
-    const sendbird = initializeSendbird(appId, { internalStorage, ...sanitizeChatOptions(chatOptions) });
+    const sendbird = initializeSendbird(appId, sanitizeChatOptions(chatOptions));
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
@@ -183,7 +191,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
-      const sendbird = initializeSendbird(appId, { internalStorage, ...sanitizeChatOptions(chatOptions) });
+      const sendbird = initializeSendbird(appId, sanitizeChatOptions(chatOptions));
       setSdkInstance(sendbird.chatSDK);
       unsubscribes.current = sendbird.unsubscribes;
     }
@@ -288,21 +296,23 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
 };
 
 interface InitOptions extends ChatOmittedInitParams {
-  internalStorage: InternalLocalCacheStorage;
+  localCacheStorage: LocalCacheStorage;
   onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK;
 }
 const initializeSendbird = (appId: string, options: InitOptions) => {
   let chatSDK: SendbirdChatSDK;
   const unsubscribes: Array<() => void> = [];
-  const { internalStorage, onInitialized, ...chatInitParams } = options;
+  const { localCacheStorage, onInitialized, ...chatInitParams } = options;
 
+  const isMMKVStorage = 'getString' in localCacheStorage;
   chatSDK = SendbirdChat.init({
     ...chatInitParams,
     appId,
     newInstance: true,
     modules: [new GroupChannelModule(), new OpenChannelModule()],
     localCacheEnabled: true,
-    useAsyncStorageStore: internalStorage as never,
+    useMMKVStorageStore: isMMKVStorage ? (localCacheStorage as MMKV) : undefined,
+    useAsyncStorageStore: !isMMKVStorage ? (localCacheStorage as AsyncStorageStatic) : undefined,
   });
 
   if (onInitialized) {

package/src/contexts/SendbirdChatCtx.tsx

@@ -170,7 +170,7 @@ export const SendbirdChatProvider = ({
 
   useEffect(() => {
     return () => {
-      sdkInstance.disconnect().then(() => _setCurrentUser(undefined));
+      sdkInstance.disconnectWebSocket().then(() => _setCurrentUser(undefined));
     };
   }, [sdkInstance]);
 

package/src/libs/EmojiManager.ts

@@ -1,9 +1,9 @@
 import type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';
 
-import type { LocalCacheStorage } from '../types';
+import type { AsyncLocalCacheStorage } from '../types';
 import InternalLocalCacheStorage from './InternalLocalCacheStorage';
 
-class MemoryStorage implements LocalCacheStorage {
+class MemoryStorage implements AsyncLocalCacheStorage {
   _data: Record<string, string> = {};
 
   async getAllKeys(): Promise<readonly string[] | string[]> {

package/src/libs/InternalLocalCacheStorage.ts

@@ -1,47 +1,96 @@
 import { ASYNC_NOOP } from '@sendbird/uikit-utils';
 
-import type { KeyValuePairGet, KeyValuePairSet, LocalCacheStorage } from '../types';
+import type {
+  AsyncLocalCacheStorage,
+  KeyValuePairGet,
+  KeyValuePairSet,
+  LocalCacheStorage,
+  MMKVLocalCacheStorage,
+} from '../types';
 
-export default class InternalLocalCacheStorage implements LocalCacheStorage {
-  constructor(private storage: LocalCacheStorage) {}
+export default class InternalLocalCacheStorage implements AsyncLocalCacheStorage {
+  private readonly _mmkv?: MMKVLocalCacheStorage;
+  private readonly _async?: AsyncLocalCacheStorage;
 
-  getAllKeys() {
-    return this.storage.getAllKeys();
+  constructor(storage: LocalCacheStorage) {
+    if ('getString' in storage) {
+      this._mmkv = storage;
+    } else {
+      this._async = storage;
+    }
   }
 
-  getItem(key: string) {
-    return this.storage.getItem(key);
+  async getAllKeys() {
+    if (this._mmkv) {
+      return this._mmkv.getAllKeys();
+    } else if (this._async) {
+      return this._async.getAllKeys();
+    } else {
+      return [];
+    }
+  }
+
+  async getItem(key: string) {
+    if (this._mmkv) {
+      return this._mmkv.getString(key) ?? null;
+    } else if (this._async) {
+      return this._async.getItem(key);
+    } else {
+      return null;
+    }
   }
 
-  removeItem(key: string) {
-    return this.storage.removeItem(key);
+  async removeItem(key: string) {
+    if (this._mmkv) {
+      this._mmkv.delete(key);
+    } else if (this._async) {
+      return this._async.removeItem(key);
+    }
   }
 
-  setItem(key: string, value: string) {
-    return this.storage.setItem(key, value);
+  async setItem(key: string, value: string) {
+    if (this._mmkv) {
+      this._mmkv.set(key, value);
+    } else if (this._async) {
+      return this._async.setItem(key, value);
+    }
   }
 
   async multiGet(keys: string[]) {
-    if (this.storage.multiGet) {
-      return this.storage.multiGet(keys);
-    } else {
+    if (this._mmkv) {
       return Promise.all(keys.map(async (key) => [key, await this.getItem(key)] as KeyValuePairGet));
+    } else if (this._async) {
+      if (this._async?.multiGet) {
+        return this._async.multiGet(keys);
+      } else {
+        return Promise.all(keys.map(async (key) => [key, await this.getItem(key)] as KeyValuePairGet));
+      }
+    } else {
+      return [];
     }
   }
 
   async multiRemove(keys: string[]) {
-    if (this.storage.multiRemove) {
-      await this.storage.multiRemove(keys);
-    } else {
+    if (this._mmkv) {
       await Promise.all(keys.map(async (key) => this.removeItem(key)));
+    } else if (this._async) {
+      if (this._async?.multiRemove) {
+        await this._async.multiRemove(keys);
+      } else {
+        await Promise.all(keys.map(async (key) => this.removeItem(key)));
+      }
     }
   }
 
   async multiSet(keyValuePairs: Array<KeyValuePairSet>) {
-    if (this.storage.multiSet) {
-      await this.storage.multiSet(keyValuePairs);
-    } else {
-      await Promise.all(keyValuePairs.map(([key, value]) => this.storage.setItem(key, value)));
+    if (this._mmkv) {
+      await Promise.all(keyValuePairs.map(([key, value]) => this.setItem(key, value)));
+    } else if (this._async) {
+      if (this._async?.multiSet) {
+        await this._async.multiSet(keyValuePairs);
+      } else {
+        await Promise.all(keyValuePairs.map(([key, value]) => this.setItem(key, value)));
+      }
     }
   }
 

package/src/platform/createMediaService.native.tsx

@@ -21,7 +21,15 @@ const createNativeMediaService = ({
 }: Modules): MediaServiceInterface => {
   return {
     VideoComponent({ source, resizeMode, onLoad, ...props }) {
-      return <VideoComponent {...props} source={source} resizeMode={resizeMode} onLoad={onLoad} controls />;
+      return (
+        <VideoComponent
+          {...props}
+          source={source as { uri: string }}
+          resizeMode={resizeMode}
+          onLoad={onLoad}
+          controls
+        />
+      );
     },
     async getVideoThumbnail({ url, timeMills }) {
       try {

package/src/types.ts

@@ -1,10 +1,13 @@
 import type { ComponentType, ErrorInfo, ReactNode } from 'react';
+import type { MMKV } from 'react-native-mmkv';
 
 import type { SendbirdUser } from '@sendbird/uikit-utils';
 
+export type LocalCacheStorage = AsyncLocalCacheStorage | MMKVLocalCacheStorage;
+
 export type KeyValuePairGet = [string, string | null];
 export type KeyValuePairSet = [string, string];
-export interface LocalCacheStorage {
+export interface AsyncLocalCacheStorage {
   getAllKeys(): Promise<readonly string[] | string[]>;
   getItem(key: string): Promise<string | null>;
   setItem(key: string, value: string): Promise<void>;
@@ -15,6 +18,8 @@ export interface LocalCacheStorage {
   multiRemove?(keys: string[]): Promise<void>;
 }
 
+export type MMKVLocalCacheStorage = Pick<MMKV, 'getString' | 'set' | 'delete' | 'getAllKeys'>;
+
 export type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };
 
 export type CommonComponent<P = {}> = ComponentType<P & { children?: ReactNode | undefined }>;

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.6.0';
+const VERSION = '3.7.1';
 export default VERSION;