@sendbird/uikit-react-native 1.1.1 → 2.0.0-rc.0

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -7,35 +7,49 @@ import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 import { usePlatformService } from '../../../hooks/useContext';
 import type { FileMessageProps } from './index';
 
-const VideoFileMessage = ({ message }: FileMessageProps) => {
-  const { colors } = useUIKitTheme();
+const useRetry = (videoFileUrl: string, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
 
   const { mediaService } = usePlatformService();
-  const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
 
-  const [state, setState] = useState({
-    thumbnail: null as null | string,
-    loading: true,
-    imageNotFound: false,
-  });
+  const fetchThumbnail = () => {
+    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
+      setState({ loading: false, thumbnail: result?.path ?? null });
+    });
+  };
 
   useEffect(() => {
-    mediaService
-      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })
-      .then((result) => {
-        if (result?.path) {
-          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));
-        } else {
-          throw new Error('Cannot generate thumbnail');
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail();
+          }, retryCountRef.current * 5000);
         }
-      })
-      .catch(() => {
-        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));
-      });
-  }, []);
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+
+  return state;
+};
+
+const VideoFileMessage = ({ message }: FileMessageProps) => {
+  const { colors } = useUIKitTheme();
+
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+
+  const { loading, thumbnail } = useRetry(fileUrl);
 
-  if (state.loading || state.imageNotFound) {
+  if (loading) {
     return (
       <View style={[style, styles.container]}>
         <PlayIcon />
@@ -45,13 +59,7 @@ const VideoFileMessage = ({ message }: FileMessageProps) => {
 
   return (
     <View style={styles.container}>
-      <Image
-        source={{ uri: state.thumbnail || fileUrl }}
-        style={style}
-        resizeMode={'cover'}
-        resizeMethod={'resize'}
-        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}
-      />
+      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
       <PlayIcon />
     </View>
   );

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -18,7 +18,7 @@ const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   return (
     <View style={styles.sender}>
       {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>
+        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

package/src/components/MessageRenderer/UserMessage/OpenGraphUserMessage.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Linking, TouchableOpacity, View } from 'react-native';
-import type Sendbird from 'sendbird';
 
+import type { OGMetaData } from '@sendbird/chat/message';
 import {
   Icon,
   Image,
@@ -16,7 +16,7 @@ import { useLocalization } from '../../../hooks/useContext';
 import type { UserMessageProps } from './index';
 
 type Props = UserMessageProps & {
-  ogMetaData: Sendbird.OGMetaData;
+  ogMetaData: OGMetaData;
 };
 const OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {
   const { STRINGS } = useLocalization();
@@ -80,6 +80,8 @@ const OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props)
 
 const styles = createStyleSheet({
   container: {
+    width: 240,
+    maxWidth: 240,
     borderRadius: 16,
     overflow: 'hidden',
   },
@@ -93,7 +95,7 @@ const styles = createStyleSheet({
     paddingBottom: 12,
   },
   ogImageContainer: {
-    width: 240,
+    flex: 1,
     height: 136,
   },
   ogImage: {

package/src/components/MessageRenderer/index.tsx

@@ -107,9 +107,9 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
             </View>
           )}
           {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}
-          <View>
+          <View style={styles.bubbleContainer}>
             {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}
-            <View style={styles.bubbleContainer}>
+            <View style={styles.bubbleWrapper}>
               {messageComponent}
               {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}
             </View>
@@ -150,6 +150,9 @@ const styles = createStyleSheet({
     maxWidth: 240,
   },
   bubbleContainer: {
+    flexShrink: 1,
+  },
+  bubbleWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end',
   },

package/src/containers/SendbirdUIKitContainer.tsx

@@ -1,8 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import Sendbird from 'sendbird';
 
+import Sendbird from '@sendbird/chat';
+import { GroupChannelModule } from '@sendbird/chat/groupChannel';
+import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
   DialogProvider,
@@ -87,23 +89,25 @@ const SendbirdUIKitContainer = ({
   const getSendbirdSDK = () => {
     let sdk: SendbirdChatSDK;
 
-    if (chatOptions?.localCacheStorage) {
-      sdk = new Sendbird({ appId, localCacheEnabled: true });
-      sdk.useAsyncStorageAsDatabase(new InternalLocalCacheStorage(chatOptions.localCacheStorage));
-    } else {
-      sdk = new Sendbird({ appId });
-    }
+    sdk = Sendbird.init({
+      appId,
+      modules: [new GroupChannelModule(), new OpenChannelModule()],
+      localCacheEnabled: Boolean(chatOptions?.localCacheStorage),
+      // @ts-ignore
+      useAsyncStorageStore: chatOptions?.localCacheStorage
+        ? new InternalLocalCacheStorage(chatOptions.localCacheStorage)
+        : undefined,
+    });
 
     if (chatOptions?.onInitialized) {
       sdk = chatOptions?.onInitialized(sdk);
     }
 
     if (SendbirdUIKit.VERSION) {
-      // @ts-ignore
       sdk.addExtension('sb_uikit', SendbirdUIKit.VERSION);
     }
+
     if (SendbirdUIKit.PLATFORM) {
-      // @ts-ignore
       sdk.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
     }
 

package/src/contexts/SendbirdChat.tsx

@@ -2,8 +2,13 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
 
 import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
-import { useForceUpdate } from '@sendbird/uikit-utils';
+import type {
+  SendbirdChatSDK,
+  SendbirdGroupChannel,
+  SendbirdUser,
+  SendbirdUserUpdateParams,
+} from '@sendbird/uikit-utils';
+import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileType } from '../platform/types';
 
@@ -21,7 +26,7 @@ type Context = {
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
   // helper functions
-  updateCurrentUserInfo: (nickname: string, profile?: string | FileType) => Promise<SendbirdUser>;
+  updateCurrentUserInfo: (nickname?: string, profile?: string | FileType) => Promise<SendbirdUser>;
   markAsDeliveredWithChannel: (channel: SendbirdGroupChannel) => void;
 
   features: {
@@ -62,16 +67,18 @@ export const SendbirdChatProvider = ({
 
       if (!user) throw new Error('Current user is not defined, please connect using `useConnection()` hook first');
 
-      if (typeof profile === 'undefined') {
-        user = await sdkInstance.updateCurrentUserInfo(nickname, sdkInstance.currentUser.profileUrl);
-      } else if (typeof profile === 'string') {
-        user = await sdkInstance.updateCurrentUserInfo(nickname, profile);
+      const params: SendbirdUserUpdateParams = { nickname };
+
+      if (typeof profile === 'string') {
+        params.profileUrl = profile;
       } else if (typeof profile === 'object') {
-        user = await sdkInstance.updateCurrentUserInfoWithProfileImage(nickname, profile);
+        params.profileImage = profile;
       } else {
         throw new Error(`Cannot update profile, not supported profile type(${typeof profile})`);
       }
 
+      user = await sdkInstance.updateCurrentUserInfo(params);
+
       setCurrentUser(user);
       return user;
     },
@@ -80,9 +87,7 @@ export const SendbirdChatProvider = ({
 
   const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
     (channel: SendbirdGroupChannel) => {
-      if (appFeatures.deliveryReceiptEnabled && channel.unreadMessageCount > 0) {
-        sdkInstance.markAsDelivered(channel.url);
-      }
+      if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered(sdkInstance, channel);
     },
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );
@@ -90,8 +95,8 @@ export const SendbirdChatProvider = ({
   useEffect(() => {
     const listener = (status: AppStateStatus) => {
       // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
-      if (status === 'active') sdkInstance.getConnectionState() === 'CLOSED' && sdkInstance.setForegroundState();
-      else sdkInstance.getConnectionState() === 'OPEN' && sdkInstance.setBackgroundState();
+      if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
+      else sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
     };
 
     const subscriber = AppState.addEventListener('change', listener);

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -5,6 +5,7 @@ import {
   Icon,
   TextInput,
   createStyleSheet,
+  useAlert,
   useBottomSheet,
   useToast,
   useUIKitTheme,
@@ -12,6 +13,8 @@ import {
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService } from '../../../../hooks/useContext';
+import SBUError from '../../../../libs/SBUError';
+import SBUUtils from '../../../../libs/SBUUtils';
 import type { GroupChannelProps } from '../../types';
 
 type SendInputProps = GroupChannelProps['Input'] & {
@@ -21,9 +24,10 @@ type SendInputProps = GroupChannelProps['Input'] & {
 };
 const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
   const { STRINGS } = useLocalization();
-  const { openSheet } = useBottomSheet();
   const { fileService } = usePlatformService();
   const { colors } = useUIKitTheme();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
   const toast = useToast();
 
   const onPressSend = () => {
@@ -39,7 +43,17 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           onPress: async () => {
             const photo = await fileService.openCamera({
               mediaType: 'all',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
 
             if (photo) {
@@ -54,7 +68,17 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
             const photo = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'all',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
 
             if (photo && photo[0]) {
@@ -67,7 +91,7 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           icon: 'document',
           onPress: async () => {
             const file = await fileService.openDocument({
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+              onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
             });
 
             if (file) {

package/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -3,7 +3,7 @@ import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { groupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';
+import { isGroupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';
 
 import { GroupChannelContexts } from '../../module/moduleContext';
 import type { GroupChannelProps } from '../../types';
@@ -20,7 +20,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
 
   const [text, setText] = useState('');
   const textTmpRef = useRef('');
-  const disabled = groupChannelChatUnavailable(channel);
+  const isChatUnavailable = isGroupChannelChatUnavailable(channel);
 
   useEffect(() => {
     if (text.length === 0) channel.endTyping();
@@ -28,13 +28,13 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   }, [text]);
 
   useEffect(() => {
-    if (disabled) {
+    if (isChatUnavailable) {
       textTmpRef.current = text;
       setText('');
     } else {
       setText(textTmpRef.current);
     }
-  }, [disabled]);
+  }, [isChatUnavailable]);
 
   const inputMode = useIIFE(() => {
     if (!editMessage) return 'send';
@@ -49,7 +49,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
     >
       <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
         <View style={{ justifyContent: 'center', width: '100%' }}>
-          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} disabled={disabled} />}
+          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} disabled={isChatUnavailable} />}
           {inputMode === 'edit' && editMessage && (
             <EditInput
               {...props}

package/src/domain/groupChannel/types.ts

@@ -4,12 +4,12 @@ import type { FlatListProps } from 'react-native';
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
   SendbirdFileMessage,
-  SendbirdFileMessageParams,
+  SendbirdFileMessageCreateParams,
   SendbirdGroupChannel,
   SendbirdMessage,
   SendbirdUser,
   SendbirdUserMessage,
-  SendbirdUserMessageParams,
+  SendbirdUserMessageCreateParams,
 } from '@sendbird/uikit-utils';
 
 import type { FileType } from '../../platform/types';
@@ -23,11 +23,11 @@ export interface GroupChannelProps {
     onPressHeaderRight: GroupChannelProps['Header']['onPressHeaderRight'];
 
     onBeforeSendFileMessage?: (
-      params: SendbirdFileMessageParams,
-    ) => SendbirdFileMessageParams | Promise<SendbirdFileMessageParams>;
+      params: SendbirdFileMessageCreateParams,
+    ) => SendbirdFileMessageCreateParams | Promise<SendbirdFileMessageCreateParams>;
     onBeforeSendUserMessage?: (
-      params: SendbirdUserMessageParams,
-    ) => SendbirdUserMessageParams | Promise<SendbirdUserMessageParams>;
+      params: SendbirdUserMessageCreateParams,
+    ) => SendbirdUserMessageCreateParams | Promise<SendbirdUserMessageCreateParams>;
     onPressMediaMessage?: GroupChannelProps['MessageList']['onPressMediaMessage'];
 
     renderMessage?: GroupChannelProps['MessageList']['renderMessage'];

package/src/domain/groupChannelList/component/GroupChannelListList.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { PushTriggerOption } from '@sendbird/chat';
 import { useActionMenu, useToast } from '@sendbird/uikit-react-native-foundation';
 import { PASS, SendbirdGroupChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
@@ -29,9 +30,9 @@ const GroupChannelListList = ({
           title: STRINGS.GROUP_CHANNEL_LIST.DIALOG_CHANNEL_NOTIFICATION(channel),
           onPress: async () => {
             if (action === 'on') {
-              await channel.setMyPushTriggerOption('default');
+              await channel.setMyPushTriggerOption(PushTriggerOption.DEFAULT);
             } else {
-              await channel.setMyPushTriggerOption('off');
+              await channel.setMyPushTriggerOption(PushTriggerOption.OFF);
             }
           },
           onError: () => {

package/src/domain/groupChannelSettings/component/GroupChannelSettingsInfo.tsx

@@ -15,7 +15,7 @@ const GroupChannelSettingsInfo = (_: GroupChannelSettingsProps['Info']) => {
   const { STRINGS } = useLocalization();
 
   if (!currentUser) {
-    Logger.warn('Cannot render GroupChannelSettingsInfo, User is not connected');
+    Logger.warn('Cannot render GroupChannelSettingsInfo, please connect using `useConnection()` hook first');
     return null;
   }
 

package/src/domain/groupChannelSettings/component/GroupChannelSettingsMenu.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { View } from 'react-native';
 
+import { PushTriggerOption } from '@sendbird/chat';
 import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
 import { Icon, MenuBar, Switch, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 
@@ -20,9 +21,9 @@ const GroupChannelSettingsMenu = ({
 
   const toggleNotification = async () => {
     if (channel.myPushTriggerOption === 'off') {
-      await channel.setMyPushTriggerOption('default');
+      await channel.setMyPushTriggerOption(PushTriggerOption.DEFAULT);
     } else {
-      await channel.setMyPushTriggerOption('off');
+      await channel.setMyPushTriggerOption(PushTriggerOption.OFF);
     }
   };
 

package/src/domain/groupChannelSettings/module/moduleContext.tsx

@@ -1,12 +1,12 @@
 import React, { createContext, useCallback } from 'react';
 
 import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
-import { useActionMenu, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
+import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
 import {
   NOOP,
+  SendbirdBaseChannel,
   SendbirdGroupChannel,
-  SendbirdGroupChannelParams,
-  SendbirdOpenChannel,
+  SendbirdGroupChannelUpdateParams,
   isDifferentChannel,
   useForceUpdate,
   useUniqId,
@@ -14,6 +14,8 @@ import {
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
+import SBUError from '../../../libs/SBUError';
+import SBUUtils from '../../../libs/SBUUtils';
 import type { GroupChannelSettingsContextsType, GroupChannelSettingsModule } from '../types';
 
 export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
@@ -32,10 +34,11 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
   const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
   const { fileService } = usePlatformService();
+  const { alert } = useAlert();
 
   const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
 
-  const onChannelChanged = (channel: SendbirdGroupChannel | SendbirdOpenChannel) => {
+  const onChannelChanged = (channel: SendbirdBaseChannel) => {
     if (isDifferentChannel(channel, activeChannel) || !channel.isGroupChannel()) return;
     setActiveChannel(channel);
     forceUpdate();
@@ -53,7 +56,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
   const { openMenu } = useActionMenu();
 
   const updateChannel = useCallback(
-    async (params: SendbirdGroupChannelParams) => {
+    async (params: SendbirdGroupChannelUpdateParams) => {
       const updatedChannel = await activeChannel.updateChannel(params);
       setActiveChannel(updatedChannel);
       forceUpdate();
@@ -67,11 +70,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
       submitLabel: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_OK,
       placeholder: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER,
       defaultValue: activeChannel.name,
-      onSubmit: async (channelName) => {
-        const params = new sdk.GroupChannelParams();
-        params.name = channelName;
-        await updateChannel(params);
-      },
+      onSubmit: (channelName) => updateChannel({ name: channelName }),
     });
   }, [STRINGS, updateChannel, activeChannel.name]);
 
@@ -84,13 +83,21 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
           onPress: async () => {
             const file = await fileService.openCamera({
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('camera', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
             });
             if (!file) return;
 
-            const params = new sdk.GroupChannelParams();
-            params.coverImage = file;
-            await updateChannel(params);
+            await updateChannel({ coverImage: file });
           },
         },
         {
@@ -99,13 +106,21 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
             const files = await fileService.openMediaLibrary({
               selectionLimit: 1,
               mediaType: 'photo',
-              onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error'),
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE('device storage', 'UIKitSample'),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
             });
             if (!files || !files[0]) return;
 
-            const params = new sdk.GroupChannelParams();
-            params.coverImage = files[0];
-            await updateChannel(params);
+            await updateChannel({ coverImage: files[0] });
           },
         },
       ],

package/src/domain/groupChannelUserList/types.ts

@@ -1,5 +1,5 @@
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdGroupChannel, SendbirdGroupChannelParams } from '@sendbird/uikit-utils';
+import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 import type { GroupChannelType } from '../groupChannelList/types';
@@ -14,9 +14,9 @@ export interface GroupChannelCreateProps<User> {
     channelType?: GroupChannelType;
     userIdsGenerator?: (users: User[]) => UserIds;
     onBeforeCreateChannel?: (
-      params: SendbirdGroupChannelParams,
+      params: SendbirdGroupChannelCreateParams,
       users: User[],
-    ) => SendbirdGroupChannelParams | Promise<SendbirdGroupChannelParams>;
+    ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
     sortComparator?: UseUserListOptions<User>['sortComparator'];
     queryCreator?: UseUserListOptions<User>['queryCreator'];
     renderUser?: UserListProps<User>['List']['renderUser'];

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
+import { Logger, PASS, SendbirdGroupChannelCreateParams, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';
@@ -95,18 +95,19 @@ const createGroupChannelCreateFragment = <UserType,>(
         <UserListModule.Header
           onPressHeaderLeft={onPressHeaderLeft}
           onPressHeaderRight={async (users) => {
-            const params = new sdk.GroupChannelParams();
+            const params: SendbirdGroupChannelCreateParams = {
+              invitedUserIds: userIdsGenerator(users),
+              name: '',
+              coverUrl: '',
+              isDistinct: false,
+            };
 
             if (channelType === 'BROADCAST') params.isBroadcast = true;
             if (channelType === 'SUPER_GROUP') params.isSuper = true;
             if (currentUser) params.operatorUserIds = [currentUser.userId];
-            params.addUserIds(userIdsGenerator(users));
-            params.name = '';
-            params.coverUrl = '';
-            params.isDistinct = false;
 
             const processedParams = await onBeforeCreateChannel(params, users);
-            const channel = await sdk.GroupChannel.createChannel(processedParams);
+            const channel = await sdk.groupChannel.createChannel(processedParams);
             onCreateChannel(channel);
           }}
         />