@sendbird/uikit-react-native 3.3.0 → 3.4.1

package/lib/typescript/src/components/{FileViewer.d.ts → FileViewer/index.d.ts}

@@ -8,6 +8,10 @@ type Props = {
     onPressDelete?: (message: SendbirdFileMessage) => void;
     headerShown?: boolean;
     headerTopInset?: number;
+    /** This prop is only available on the Image viewer */
+    minZoom?: number;
+    /** This prop is only available on the Image viewer */
+    maxZoom?: number;
 };
-declare const FileViewer: ({ headerShown, deleteMessage, headerTopInset, fileMessage, onPressDownload, onPressDelete, onClose, }: Props) => React.JSX.Element;
+declare const FileViewer: ({ headerShown, maxZoom, minZoom, headerTopInset, fileMessage, onClose, onPressDownload, onPressDelete, deleteMessage, }: Props) => React.JSX.Element;
 export default FileViewer;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -13,7 +13,7 @@ import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface, PlayerServiceInterface, RecorderServiceInterface } from '../platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.3.0";
+    VERSION: "3.4.1";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;

package/lib/typescript/src/domain/groupChannel/component/GroupChannelMessageList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<(props: Pick<import("../../../components/ChannelMessageList").ChannelMessageListProps<import("@sendbird/chat/groupChannel").GroupChannel>, "channel" | "onTopReached" | "onBottomReached" | "onScrolledAwayFromBottom" | "currentUserId" | "enableMessageGrouping" | "searchItem" | "hasNext" | "onDeleteMessage" | "onResendFailedMessage" | "onPressMediaMessage" | "renderNewMessagesButton" | "renderScrollToBottomButton" | "renderMessage" | "messages" | "newMessages" | "scrolledAwayFromBottom" | "flatListProps"> & {
-    onResetMessageList: (callback?: (() => void) | undefined) => void;
-    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: (() => void) | undefined) => void;
+    onResetMessageList: () => Promise<void>;
+    onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
     onUpdateSearchItem: (searchItem?: {
         startingPoint: number;
     } | undefined) => void;

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

@@ -1,11 +1,13 @@
 import type React from 'react';
 import type { FlatList } from 'react-native';
+import type { MessageCollectionParams, MessageFilterParams } from '@sendbird/chat/groupChannel';
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type { OnBeforeHandler, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdFileMessageUpdateParams, SendbirdGroupChannel, SendbirdMessage, SendbirdUser, SendbirdUserMessage, SendbirdUserMessageCreateParams, SendbirdUserMessageUpdateParams } from '@sendbird/uikit-utils';
 import type { ChannelInputProps, SuggestedMentionListProps } from '../../components/ChannelInput';
 import type { ChannelMessageListProps } from '../../components/ChannelMessageList';
 import type { CommonComponent } from '../../types';
 import type { PubSub } from '../../utils/pubsub';
+export type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
 export interface GroupChannelProps {
     Fragment: {
         channel: SendbirdGroupChannel;
@@ -25,8 +27,17 @@ export interface GroupChannelProps {
         keyboardAvoidOffset?: GroupChannelProps['Provider']['keyboardAvoidOffset'];
         flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
         sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
-        collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
         searchItem?: GroupChannelProps['MessageList']['searchItem'];
+        /**
+         * @description You can specify the query parameters for the message list.
+         * @example
+         * ```
+         * <GroupChannelFragment messageListQueryParams={{ prevResultLimit: 20, customTypesFilter: ['filter'] }} />
+         * ```
+         * */
+        messageListQueryParams?: MessageListQueryParamsType;
+        /** @deprecated Please use `messageListQueryParams` instead */
+        collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
     };
     Header: {
         shouldHideRight: () => boolean;
@@ -34,8 +45,8 @@ export interface GroupChannelProps {
         onPressHeaderRight: () => void;
     };
     MessageList: Pick<ChannelMessageListProps<SendbirdGroupChannel>, 'enableMessageGrouping' | 'currentUserId' | 'channel' | 'messages' | 'newMessages' | 'scrolledAwayFromBottom' | 'onScrolledAwayFromBottom' | 'onTopReached' | 'onBottomReached' | 'onResendFailedMessage' | 'onDeleteMessage' | 'onPressMediaMessage' | 'renderMessage' | 'renderNewMessagesButton' | 'renderScrollToBottomButton' | 'flatListProps' | 'hasNext' | 'searchItem'> & {
-        onResetMessageList: (callback?: () => void) => void;
-        onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+        onResetMessageList: () => Promise<void>;
+        onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
         onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
     };
     Input: Pick<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'SuggestedMentionList' | 'AttachmentsButton'>;
@@ -120,7 +131,7 @@ export interface GroupChannelModule {
     StatusEmpty: CommonComponent;
     StatusLoading: CommonComponent;
 }
-export type GroupChannelFragment = CommonComponent<GroupChannelProps['Fragment']>;
+export type GroupChannelFragment = React.FC<GroupChannelProps['Fragment']>;
 export type GroupChannelPubSubContextPayload = {
     type: 'MESSAGE_SENT_PENDING' | 'MESSAGE_SENT_SUCCESS';
     data: {

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

@@ -46,4 +46,4 @@ export interface GroupChannelBannedUsersModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<GroupChannelBannedUsersProps['StatusError']>;
 }
-export type GroupChannelBannedUsersFragment = CommonComponent<GroupChannelBannedUsersProps['Fragment']>;
+export type GroupChannelBannedUsersFragment = React.FC<GroupChannelBannedUsersProps['Fragment']>;

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

@@ -1,18 +1,29 @@
 import type React from 'react';
 import type { FlatListProps } from 'react-native';
+import type { GroupChannelCollectionParams, GroupChannelFilterParams } from '@sendbird/chat/groupChannel';
 import type { UseGroupChannelListOptions } from '@sendbird/uikit-chat-hooks';
 import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
 import type { CommonComponent } from '../../types';
+export type ChannelListQueryParamsType = Omit<GroupChannelCollectionParams, 'filter'> & GroupChannelFilterParams;
 export interface GroupChannelListProps {
     Fragment: {
         onPressChannel: GroupChannelListProps['List']['onPressChannel'];
         onPressCreateChannel: (channelType: GroupChannelType) => void;
         renderGroupChannelPreview?: GroupChannelListProps['List']['renderGroupChannelPreview'];
         skipTypeSelection?: boolean;
-        collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
         flatListProps?: GroupChannelListProps['List']['flatListProps'];
         menuItemCreator?: GroupChannelListProps['List']['menuItemCreator'];
+        /**
+         * @description You can specify the query parameters for the channel list.
+         * @example
+         * ```
+         * <GroupChannelListFragment channelListQueryParams={{ limit: 20, includeEmpty: false }} />
+         * ```
+         * */
+        channelListQueryParams?: ChannelListQueryParamsType;
+        /** @deprecated Please use `channelListQueryParams` instead */
+        collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
     };
     Header: {};
     List: {
@@ -56,5 +67,5 @@ export interface GroupChannelListModule {
     StatusEmpty: CommonComponent;
     StatusLoading: CommonComponent;
 }
-export type GroupChannelListFragment = CommonComponent<GroupChannelListProps['Fragment']>;
+export type GroupChannelListFragment = React.FC<GroupChannelListProps['Fragment']>;
 export type GroupChannelType = 'GROUP' | 'SUPER_GROUP' | 'BROADCAST';

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

@@ -40,4 +40,4 @@ export interface GroupChannelModerationModule {
     Header: CommonComponent<GroupChannelModerationProps['Header']>;
     Menu: CommonComponent<GroupChannelModerationProps['Menu']>;
 }
-export type GroupChannelModerationFragment = CommonComponent<GroupChannelModerationProps['Fragment']>;
+export type GroupChannelModerationFragment = React.FC<GroupChannelModerationProps['Fragment']>;

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

@@ -46,4 +46,4 @@ export interface GroupChannelMutedMembersModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<GroupChannelMutedMembersProps['StatusError']>;
 }
-export type GroupChannelMutedMembersFragment = CommonComponent<GroupChannelMutedMembersProps['Fragment']>;
+export type GroupChannelMutedMembersFragment = React.FC<GroupChannelMutedMembersProps['Fragment']>;

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

@@ -30,4 +30,4 @@ export interface GroupChannelNotificationsModule {
     Header: CommonComponent<GroupChannelNotificationsProps['Header']>;
     View: CommonComponent<GroupChannelNotificationsProps['View']>;
 }
-export type GroupChannelNotificationsFragment = CommonComponent<GroupChannelNotificationsProps['Fragment']>;
+export type GroupChannelNotificationsFragment = React.FC<GroupChannelNotificationsProps['Fragment']>;

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

@@ -48,4 +48,4 @@ export interface GroupChannelOperatorsModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<GroupChannelOperatorsProps['StatusError']>;
 }
-export type GroupChannelOperatorsFragment = CommonComponent<GroupChannelOperatorsProps['Fragment']>;
+export type GroupChannelOperatorsFragment = React.FC<GroupChannelOperatorsProps['Fragment']>;

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

@@ -48,4 +48,4 @@ export interface GroupChannelSettingsModule {
     Info: CommonComponent<GroupChannelSettingsProps['Info']>;
     Menu: CommonComponent<GroupChannelSettingsProps['Menu']>;
 }
-export type GroupChannelSettingsFragment = CommonComponent<GroupChannelSettingsProps['Fragment']>;
+export type GroupChannelSettingsFragment = React.FC<GroupChannelSettingsProps['Fragment']>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, UserStruct } from '@sendbird/uikit-utils';
 import type { CommonComponent } from '../../types';
@@ -36,7 +37,7 @@ export interface GroupChannelMembersProps {
         queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
     };
 }
-export type GroupChannelMembersFragment = CommonComponent<GroupChannelMembersProps['Fragment']>;
+export type GroupChannelMembersFragment = React.FC<GroupChannelMembersProps['Fragment']>;
 export interface GroupChannelRegisterOperatorProps {
     Fragment: {
         channel: SendbirdGroupChannel;
@@ -47,4 +48,4 @@ export interface GroupChannelRegisterOperatorProps {
         queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
     };
 }
-export type GroupChannelRegisterOperatorFragment = CommonComponent<GroupChannelRegisterOperatorProps['Fragment']>;
+export type GroupChannelRegisterOperatorFragment = React.FC<GroupChannelRegisterOperatorProps['Fragment']>;

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

@@ -50,4 +50,4 @@ export interface MessageSearchModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<MessageSearchProps['StatusError']>;
 }
-export type MessageSearchFragment = CommonComponent<MessageSearchProps['Fragment']>;
+export type MessageSearchFragment = React.FC<MessageSearchProps['Fragment']>;

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

@@ -63,7 +63,7 @@ export interface OpenChannelModule {
     StatusEmpty: CommonComponent;
     StatusLoading: CommonComponent;
 }
-export type OpenChannelFragment = CommonComponent<OpenChannelProps['Fragment']>;
+export type OpenChannelFragment = React.FC<OpenChannelProps['Fragment']>;
 export type OpenChannelPubSubContextPayload = {
     type: 'MESSAGE_SENT_PENDING' | 'MESSAGE_SENT_SUCCESS';
     data: {

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

@@ -46,4 +46,4 @@ export interface OpenChannelBannedUsersModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<OpenChannelBannedUsersProps['StatusError']>;
 }
-export type OpenChannelBannedUsersFragment = CommonComponent<OpenChannelBannedUsersProps['Fragment']>;
+export type OpenChannelBannedUsersFragment = React.FC<OpenChannelBannedUsersProps['Fragment']>;

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

@@ -37,4 +37,4 @@ export interface OpenChannelCreateModule {
     ProfileInput: CommonComponent<OpenChannelCreateProps['ProfileInput']>;
     StatusLoading: CommonComponent;
 }
-export type OpenChannelCreateFragment = CommonComponent<OpenChannelCreateProps['Fragment']>;
+export type OpenChannelCreateFragment = React.FC<OpenChannelCreateProps['Fragment']>;

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

@@ -48,4 +48,4 @@ export interface OpenChannelListModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<OpenChannelListProps['StatusError']>;
 }
-export type OpenChannelListFragment = CommonComponent<OpenChannelListProps['Fragment']>;
+export type OpenChannelListFragment = React.FC<OpenChannelListProps['Fragment']>;

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

@@ -40,4 +40,4 @@ export interface OpenChannelModerationModule {
     Header: CommonComponent<OpenChannelModerationProps['Header']>;
     Menu: CommonComponent<OpenChannelModerationProps['Menu']>;
 }
-export type OpenChannelModerationFragment = CommonComponent<OpenChannelModerationProps['Fragment']>;
+export type OpenChannelModerationFragment = React.FC<OpenChannelModerationProps['Fragment']>;

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

@@ -46,4 +46,4 @@ export interface OpenChannelMutedParticipantsModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<OpenChannelMutedParticipantsProps['StatusError']>;
 }
-export type OpenChannelMutedParticipantsFragment = CommonComponent<OpenChannelMutedParticipantsProps['Fragment']>;
+export type OpenChannelMutedParticipantsFragment = React.FC<OpenChannelMutedParticipantsProps['Fragment']>;

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

@@ -48,4 +48,4 @@ export interface OpenChannelOperatorsModule {
     StatusLoading: CommonComponent;
     StatusError: CommonComponent<OpenChannelOperatorsProps['StatusError']>;
 }
-export type OpenChannelOperatorsFragment = CommonComponent<OpenChannelOperatorsProps['Fragment']>;
+export type OpenChannelOperatorsFragment = React.FC<OpenChannelOperatorsProps['Fragment']>;

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

@@ -46,4 +46,4 @@ export interface OpenChannelSettingsModule {
     Info: CommonComponent<OpenChannelSettingsProps['Info']>;
     Menu: CommonComponent<OpenChannelSettingsProps['Menu']>;
 }
-export type OpenChannelSettingsFragment = CommonComponent<OpenChannelSettingsProps['Fragment']>;
+export type OpenChannelSettingsFragment = React.FC<OpenChannelSettingsProps['Fragment']>;

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

@@ -1,6 +1,6 @@
+import type React from 'react';
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
-import type { CommonComponent } from '../../types';
 import type { UserListProps } from '../userList/types';
 export interface OpenChannelParticipantsProps {
     Fragment: {
@@ -11,7 +11,7 @@ export interface OpenChannelParticipantsProps {
         sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
     };
 }
-export type OpenChannelParticipantsFragment = CommonComponent<OpenChannelParticipantsProps['Fragment']>;
+export type OpenChannelParticipantsFragment = React.FC<OpenChannelParticipantsProps['Fragment']>;
 export interface OpenChannelRegisterOperatorProps {
     Fragment: {
         channel: SendbirdOpenChannel;
@@ -22,4 +22,4 @@ export interface OpenChannelRegisterOperatorProps {
         sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
     };
 }
-export type OpenChannelRegisterOperatorFragment = CommonComponent<OpenChannelRegisterOperatorProps['Fragment']>;
+export type OpenChannelRegisterOperatorFragment = React.FC<OpenChannelRegisterOperatorProps['Fragment']>;

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

@@ -1,4 +1,4 @@
-import type { ErrorInfo, ReactNode } from 'react';
+import type { ComponentType, ErrorInfo, ReactNode } from 'react';
 import type { SendbirdUser } from '@sendbird/uikit-utils';
 export type KeyValuePairGet = [string, string | null];
 export type KeyValuePairSet = [string, string];
@@ -16,9 +16,9 @@ export type ErrorBoundaryProps = {
     errorInfo: ErrorInfo;
     reset: () => void;
 };
-export type CommonComponent<P = {}> = (props: P & {
-    children?: ReactNode;
-}) => null | ReactNode;
+export type CommonComponent<P = {}> = ComponentType<P & {
+    children?: ReactNode | undefined;
+}>;
 export type MentionedUser = {
     range: Range;
     user: SendbirdUser;

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

@@ -1,2 +1,2 @@
-declare const VERSION = "3.3.0";
+declare const VERSION = "3.4.1";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -59,10 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "3.3.0",
-    "@sendbird/uikit-react-native-foundation": "3.3.0",
-    "@sendbird/uikit-tools": "0.0.1-alpha.42",
-    "@sendbird/uikit-utils": "3.3.0"
+    "@openspacelabs/react-native-zoomable-view": "^2.1.5",
+    "@sendbird/uikit-chat-hooks": "3.4.1",
+    "@sendbird/uikit-react-native-foundation": "3.4.1",
+    "@sendbird/uikit-tools": "0.0.1-alpha.58",
+    "@sendbird/uikit-utils": "3.4.1"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -107,7 +108,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.9.8",
+    "@sendbird/chat": "^4.10.7",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -202,5 +203,5 @@
       ]
     ]
   },
-  "gitHead": "51adda5f33a7bb450b51ce30f505dcc9884e9586"
+  "gitHead": "b3f416e3d5ab51ce020ca21f21c09ad0157722d9"
 }

package/src/components/ChannelInput/index.tsx

@@ -19,7 +19,7 @@ import {
 
 import { useSendbirdChat } from '../../hooks/useContext';
 import useMentionTextInput from '../../hooks/useMentionTextInput';
-import type { MentionedUser, Range } from '../../types';
+import type { CommonComponent, MentionedUser, Range } from '../../types';
 import type { AttachmentsButtonProps } from './AttachmentsButton';
 import AttachmentsButton from './AttachmentsButton';
 import EditInput from './EditInput';
@@ -67,7 +67,7 @@ export type ChannelInputProps = {
   setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
 
   // mention
-  SuggestedMentionList?: (props: SuggestedMentionListProps) => React.ReactNode | null;
+  SuggestedMentionList?: CommonComponent<SuggestedMentionListProps>;
 
   // sub-components
   AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;

package/src/components/ChannelMessageList/index.tsx

@@ -32,7 +32,6 @@ import {
 import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
 import { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
-import type { CommonComponent } from '../../types';
 import ChatFlatList from '../ChatFlatList';
 import { ReactionAddons } from '../ReactionAddons';
 
@@ -59,7 +58,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   onEditMessage: (message: HandleableMessage) => void;
   onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
   onDeleteMessage: (message: HandleableMessage) => Promise<void>;
-  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
   onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 
@@ -78,15 +77,10 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     bottomSheetItem?: BottomSheetItem;
     isFirstItem: boolean;
   }) => React.ReactElement | null;
-  renderNewMessagesButton: null | CommonComponent<{
-    visible: boolean;
-    onPress: () => void;
-    newMessages: SendbirdMessage[];
-  }>;
-  renderScrollToBottomButton: null | CommonComponent<{
-    visible: boolean;
-    onPress: () => void;
-  }>;
+  renderNewMessagesButton:
+    | null
+    | ((props: { visible: boolean; onPress: () => void; newMessages: SendbirdMessage[] }) => React.ReactElement | null);
+  renderScrollToBottomButton: null | ((props: { visible: boolean; onPress: () => void }) => React.ReactElement | null);
   flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
 } & {
   ref?: Ref<FlatList<SendbirdMessage>> | undefined;

package/src/components/FileViewer/FileViewerContent.tsx

@@ -0,0 +1,141 @@
+import { ReactNativeZoomableView, ReactNativeZoomableViewProps } from '@openspacelabs/react-native-zoomable-view';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { ImageProps, ImageStyle, ImageURISource, StyleProp, StyleSheet, useWindowDimensions } from 'react-native';
+
+import {
+  Box,
+  Image,
+  LoadingSpinner,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { FileType, useIIFE } from '@sendbird/uikit-utils';
+
+import { usePlatformService } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+
+type Props = {
+  type: FileType;
+  src: string;
+  topInset?: number;
+  bottomInset?: number;
+  maxZoom?: number;
+  minZoom?: number;
+  onPress?: () => void;
+};
+const FileViewerContent = ({ type, src, topInset = 0, bottomInset = 0, maxZoom = 4, minZoom = 1, onPress }: Props) => {
+  const [loading, setLoading] = useState(true);
+
+  const { defaultHeight } = useHeaderStyle();
+  const { mediaService } = usePlatformService();
+  const { palette } = useUIKitTheme();
+
+  const source = { uri: src };
+  const onLoadEnd = () => setLoading(false);
+  const mediaViewer = useIIFE(() => {
+    switch (type) {
+      case 'image': {
+        return (
+          <ZoomableImageView
+            source={source}
+            style={StyleSheet.absoluteFill}
+            resizeMode={'contain'}
+            onLoadEnd={onLoadEnd}
+            zoomProps={{
+              minZoom,
+              maxZoom,
+              onTouchEnd: onPress,
+            }}
+          />
+        );
+      }
+
+      case 'video':
+      case 'audio': {
+        return (
+          <mediaService.VideoComponent
+            source={source}
+            style={[StyleSheet.absoluteFill, { top: topInset, bottom: defaultHeight + bottomInset }]}
+            resizeMode={'contain'}
+            onLoad={onLoadEnd}
+          />
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  });
+
+  return (
+    <Box style={styles.container}>
+      {mediaViewer}
+      {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}
+    </Box>
+  );
+};
+
+const ZoomableImageView = ({
+  zoomProps,
+  ...props
+}: {
+  source: ImageURISource;
+  style: StyleProp<ImageStyle>;
+  resizeMode: ImageProps['resizeMode'];
+  onLoadEnd: () => void;
+  zoomProps?: ReactNativeZoomableViewProps;
+}) => {
+  const { width, height } = useWindowDimensions();
+
+  const imageSize = useRef<{ width: number; height: number }>();
+  const [contentSizeProps, setContentSizeProps] = useState<ReactNativeZoomableViewProps>({
+    contentWidth: width,
+    contentHeight: height,
+  });
+
+  useLayoutEffect(() => {
+    SBUUtils.safeRun(async () => {
+      if (props.source.uri) {
+        const image = imageSize.current ?? (await SBUUtils.getImageSize(props.source.uri));
+        imageSize.current = image;
+
+        const viewRatio = width / height;
+        const imageRatio = image.width / image.height;
+
+        const fitDirection = viewRatio > imageRatio ? 'height' : 'width';
+        const ratio = fitDirection === 'height' ? height / image.height : width / image.width;
+        const actualSize = { width: image.width * ratio, height: image.height * ratio };
+
+        setContentSizeProps({
+          contentWidth: actualSize.width,
+          contentHeight: actualSize.height,
+        });
+      }
+    });
+  }, [props.source.uri, width, height]);
+
+  return (
+    <ReactNativeZoomableView
+      visualTouchFeedbackEnabled={false}
+      style={{ width, height }}
+      initialZoom={1}
+      {...contentSizeProps}
+      {...zoomProps}
+    >
+      <Image {...props} />
+    </ReactNativeZoomableView>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    zIndex: -1,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default FileViewerContent;

package/src/components/FileViewer/FileViewerFooter.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+
+type Props = {
+  bottomInset: number;
+  deleteShown: boolean;
+  onPressDelete: () => void;
+  onPressDownload: () => void;
+};
+
+const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: Props) => {
+  const { palette } = useUIKitTheme();
+  const { defaultHeight } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <Box
+      style={[
+        styles.container,
+        {
+          paddingLeft: styles.container.paddingHorizontal + left,
+          paddingRight: styles.container.paddingHorizontal + right,
+          paddingBottom: bottomInset,
+          height: defaultHeight + bottomInset,
+          backgroundColor: palette.overlay01,
+        },
+      ]}
+    >
+      <PressBox activeOpacity={0.75} onPress={onPressDownload} style={styles.buttonContainer}>
+        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
+      </PressBox>
+      <Box style={styles.titleContainer} />
+      <PressBox activeOpacity={0.75} onPress={onPressDelete} style={styles.buttonContainer} disabled={!deleteShown}>
+        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
+      </PressBox>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  buttonContainer: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default FileViewerFooter;