feat(CLNP-3879): support mmkv storage and deprecate an async storage

docs-validation/1_introduction/SendYourFirstMessage.tsx

@@ -61,13 +61,15 @@ export const platformServices: SendbirdUIKitContainerProps['platformServices'] =
  * {@link https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-5-wrap-your-app-in-sendbirduikitcontainer}
  * */
 import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { MMKV } from 'react-native-mmkv';
+
+const mmkv = new MMKV();
 
 const App = () => {
   return (
     <SendbirdUIKitContainer
       appId={'APP_ID'}
-      chatOptions={{ localCacheStorage: AsyncStorage }}
+      chatOptions={{ localCacheStorage: mmkv }}
       platformServices={platformServices}
     >
       {/* Rest of your app */}
@@ -186,7 +188,7 @@ const App2 = () => {
   return (
     <SendbirdUIKitContainer
       appId={'APP_ID'}
-      chatOptions={{ localCacheStorage: AsyncStorage }}
+      chatOptions={{ localCacheStorage: mmkv }}
       platformServices={platformServices}
     >
       <Navigation />

docs-validation/package.json

@@ -8,23 +8,24 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@bam.tech/react-native-image-resizer": "^3.0.4",
-    "@react-native-async-storage/async-storage": "^1.15.17",
-    "@react-native-camera-roll/camera-roll": "^5.4.0",
-    "@react-native-clipboard/clipboard": "^1.8.5",
+    "@bam.tech/react-native-image-resizer": "^3.0.10",
+    "@react-native-camera-roll/camera-roll": "^7.8.1",
+    "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-firebase/messaging": "^14.7.0",
-    "@react-navigation/native": "^6.0.6",
-    "@react-navigation/native-stack": "^6.7.0",
-    "@sendbird/chat": "^4.10.7",
+    "@react-navigation/native": "^6.1.17",
+    "@react-navigation/native-stack": "^6.10.0",
+    "@sendbird/chat": "^4.12.9",
     "react": "18.2.0",
     "react-native": "0.74.3",
+    "react-native-audio-recorder-player": "^3.6.10",
     "react-native-create-thumbnail": "^2.0.0",
-    "react-native-document-picker": "^8.0.0",
-    "react-native-file-access": "^2.5.0",
-    "react-native-image-picker": "^4.7.3",
-    "react-native-permissions": "^3.6.0",
-    "react-native-safe-area-context": "^3.3.2",
-    "react-native-video": "^5.2.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"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

package.json

@@ -60,8 +60,8 @@
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-builder-bob": "^0.18.2",
-    "react-native-fast-image": "^8.5.11",
-    "react-native-safe-area-context": "^3.3.2",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-safe-area-context": "^4.10.8",
     "react-test-renderer": "^18.3.1",
     "typedoc": "^0.25.3",
     "typescript": "5.2.2",
@@ -98,7 +98,7 @@
     ]
   },
   "resolutions": {
-    "@sendbird/chat": "4.11.3",
+    "@sendbird/chat": "4.12.9",
     "@types/react": "^18"
   }
 }

packages/uikit-chat-hooks/package.json

@@ -55,7 +55,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@sendbird/chat": "^4.10.7",
+    "@sendbird/chat": "^4.12.9",
     "react": ">=16.13.1"
   },
   "react-native-builder-bob": {

packages/uikit-react-native-foundation/package.json

@@ -56,8 +56,8 @@
     "react": "18.2.0",
     "react-native": "0.74.3",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-fast-image": "^8.5.11",
-    "react-native-safe-area-context": "^3.3.2",
+    "react-native-fast-image": "^8.6.3",
+    "react-native-safe-area-context": "^4.10.8",
     "typescript": "5.2.2"
   },
   "peerDependencies": {

packages/uikit-react-native/README.md

@@ -46,16 +46,15 @@ UIKit for React-Native can be installed through either `yarn` or `npm`
 
 **Install dependencies**
 
-> Note: If you are using `react-native` version `0.72` or higher, you don't need to install `@sendbird/react-native-scrollview-enhancer`.
+> Note: If you are using `react-native` version `0.71` or lower, you should install `@sendbird/react-native-scrollview-enhancer`.
 
 ```sh
 npm install @sendbird/uikit-react-native \
             @sendbird/chat \
-            @sendbird/react-native-scrollview-enhancer \
             date-fns \
             react-native-safe-area-context \
             @react-native-community/netinfo \
-            @react-native-async-storage/async-storage
+            react-native-mmkv
 ```
 
 **Linking native modules**
@@ -116,7 +115,7 @@ const App = () => {
     <SendbirdUIKitContainer
       appId={'APP_ID'}
       chatOptions={{
-        localCacheStorage: AsyncStorage,
+        localCacheStorage: MMKV,
       }}
       platformServices={{
         file: FileService,
@@ -257,45 +256,30 @@ const expoPlatformServices = {
 You can implement Local caching easily.
 
 ```shell
-npm i @react-native-async-storage/async-storage
+npm i react-native-mmkv
 npx pod-install
 ```
 
 ```tsx
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { MMKV } from 'react-native-mmkv';
 
 import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
 
+const mmkv = new MMKV();
 const App = () => {
-  return <SendbirdUIKitContainer chatOptions={{ localCacheStorage: AsyncStorage }}>{/* ... */}</SendbirdUIKitContainer>;
+  return <SendbirdUIKitContainer chatOptions={{ localCacheStorage: mmkv }}>{/* ... */}</SendbirdUIKitContainer>;
 };
 ```
 
-Or you can use storage you are using instead of `AsyncStorage` (e.g. [`react-native-mmkv`](https://github.com/mrousavy/react-native-mmkv))
+Or you can use `AsyncStorage` instead of `MMKV`, but it has been deprecated.
 
 ```tsx
-import { MMKV } from 'react-native-mmkv';
+import { AsyncStorage } from '@react-native-async-storage/async-storage';
 
-import { LocalCacheStorage, SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
-
-const mmkvStorage = new MMKV();
-const localCacheStorage: LocalCacheStorage = {
-  async getAllKeys() {
-    return mmkvStorage.getAllKeys();
-  },
-  async setItem(key: string, value: string) {
-    return mmkvStorage.set(key, value);
-  },
-  async getItem(key: string) {
-    return mmkvStorage.getString(key) ?? null;
-  },
-  async removeItem(key: string) {
-    return mmkvStorage.delete(key);
-  },
-};
+import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
 
 const App = () => {
-  return <SendbirdUIKitContainer chatOptions={{ localCacheStorage }}>{/* ... */}</SendbirdUIKitContainer>;
+  return <SendbirdUIKitContainer chatOptions={{ localCacheStorage: AsyncStorage }}>{/* ... */}</SendbirdUIKitContainer>;
 };
 ```
 

packages/uikit-react-native/package.json

@@ -67,14 +67,14 @@
   },
   "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",
     "@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",
@@ -90,24 +90,26 @@
     "js-convert-case": "^4.2.0",
     "react": "18.2.0",
     "react-native": "0.74.3",
-    "react-native-audio-recorder-player": "^3.6.0",
+    "react-native-audio-recorder-player": "^3.6.10",
     "react-native-builder-bob": "^0.18.0",
     "react-native-create-thumbnail": "^2.0.0",
-    "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-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",
@@ -125,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"
@@ -133,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
     },

packages/uikit-react-native/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) {

packages/uikit-react-native/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[]> {