@sendbird/uikit-react-native 3.2.0 → 3.4.0

package/src/components/ChannelInput/EditInput.tsx

@@ -1,11 +1,5 @@
 import React, { forwardRef } from 'react';
-import {
-  NativeSyntheticEvent,
-  Platform,
-  TextInput as RNTextInput,
-  TextInputSelectionChangeEventData,
-  View,
-} from 'react-native';
+import { NativeSyntheticEvent, TextInput as RNTextInput, TextInputSelectionChangeEventData, View } from 'react-native';
 
 import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
@@ -27,6 +21,7 @@ interface EditInputProps extends ChannelInputProps {
 
 const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   {
+    style,
     text,
     onChangeText,
     messageToEdit,
@@ -81,7 +76,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           editable={!inputDisabled}
           autoFocus={autoFocus}
           onChangeText={onChangeText}
-          style={styles.input}
+          style={style}
           placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
@@ -112,13 +107,6 @@ const styles = createStyleSheet({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
-    borderRadius: 20,
-  },
   inputWrapper: {
     flexDirection: 'row',
   },

package/src/components/ChannelInput/SendInput.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput as RNTextInput,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
@@ -38,6 +37,7 @@ interface SendInputProps extends ChannelInputProps {
 
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    style,
     VoiceMessageInput,
     MessageToReplyPreview,
     AttachmentsButton,
@@ -173,7 +173,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           onSelectionChange={onSelectionChange}
           editable={!inputDisabled}
           onChangeText={onChangeText}
-          style={styles.input}
+          style={style}
           placeholder={getPlaceholder()}
         >
           {mentionManager.textToMentionedComponents(
@@ -284,13 +284,6 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
-    borderRadius: 20,
-  },
   sendIcon: {
     marginLeft: 4,
     padding: 4,

package/src/components/ChannelInput/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -39,6 +39,9 @@ export type SuggestedMentionListProps = {
 };
 
 export type ChannelInputProps = {
+  // style
+  style?: StyleProp<TextStyle>;
+
   // default
   channel: SendbirdBaseChannel;
   shouldRenderInput: boolean;
@@ -85,7 +88,7 @@ const ChannelInput = (props: ChannelInputProps) => {
   const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
 
   const { top, left, right, bottom } = useSafeAreaInsets();
-  const { colors } = useUIKitTheme();
+  const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
   const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
@@ -98,11 +101,18 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const mentionAvailable =
     sbOptions.uikit.groupChannel.channel.enableMention && channel.isGroupChannel() && !channel.isBroadcast;
-
   const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
+  const fontStyle = useMemo(() => {
+    if (!typography.body3.fontSize) return typography.body3;
+    // NOTE: iOS does not support textAlignVertical, so we should adjust lineHeight to center the text in multiline TextInput.
+    return { ...typography.body3, lineHeight: typography.body3.fontSize * 1.275, textAlignVertical: 'center' };
+  }, [typography.body3.fontSize]);
+
+  const textInputStyle = StyleSheet.flatten([styles.input, fontStyle, props.style]);
+
   useTypingTrigger(text, channel);
   useTextClearOnDisabled(onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
@@ -138,6 +148,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 VoiceMessageInput={props.VoiceMessageInput ?? VoiceMessageInput}
                 AttachmentsButton={props.AttachmentsButton ?? AttachmentsButton}
                 MessageToReplyPreview={props.MessageToReplyPreview ?? MessageToReplyPreview}
+                style={textInputStyle}
               />
             )}
             {inputMode === 'edit' && messageToEdit && (
@@ -152,6 +163,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 mentionedUsers={mentionedUsers}
                 messageToEdit={messageToEdit}
                 setMessageToEdit={setMessageToEdit}
+                style={textInputStyle}
               />
             )}
           </View>
@@ -211,6 +223,17 @@ const styles = createStyleSheet({
   inputDefault: {
     height: 56,
   },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    borderRadius: 20,
+    paddingTop: 8,
+    paddingBottom: 8,
+    minHeight: 36,
+    // Android - padding area is hidden
+    // iOS - padding area is visible
+    maxHeight: Platform.select({ ios: 36 * 2 + 16, android: 36 * 2 }),
+  },
 });
 
 export default React.memo(ChannelInput);

package/src/components/ChannelMessageList/index.tsx

@@ -36,8 +36,9 @@ import type { CommonComponent } from '../../types';
 import ChatFlatList from '../ChatFlatList';
 import { ReactionAddons } from '../ReactionAddons';
 
-type PressActions = { onPress?: () => void; onLongPress?: () => void };
+type PressActions = { onPress?: () => void; onLongPress?: () => void; bottomSheetItem?: BottomSheetItem };
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+type CreateMessagePressActions = (params: { message: SendbirdMessage }) => PressActions;
 export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpenChannel> = {
   enableMessageGrouping: boolean;
   currentUserId?: string;
@@ -58,7 +59,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;
 
@@ -74,6 +75,8 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
+    bottomSheetItem?: BottomSheetItem;
+    isFirstItem: boolean;
   }) => React.ReactElement | null;
   renderNewMessagesButton: null | CommonComponent<{
     visible: boolean;
@@ -121,7 +124,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const { colors } = useUIKitTheme();
   const { show } = useUserProfile();
   const { left, right } = useSafeAreaInsets();
-  const getMessagePressActions = useGetMessagePressActions({
+  const createMessagePressActions = useCreateMessagePressActions({
     channel,
     currentUserId,
     onEditMessage,
@@ -134,7 +137,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const safeAreaLayout = { paddingLeft: left, paddingRight: right };
 
   const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
-    const { onPress, onLongPress } = getMessagePressActions(item);
+    const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: item });
     return renderMessage({
       message: item,
       prevMessage: messages[index + 1],
@@ -147,6 +150,8 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       channel,
       currentUserId,
       focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
+      bottomSheetItem,
+      isFirstItem: index === 0,
     });
   });
 
@@ -191,7 +196,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   );
 };
 
-const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
+const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
   channel,
   currentUserId,
   onResendFailedMessage,
@@ -208,7 +213,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   | 'onDeleteMessage'
   | 'onResendFailedMessage'
   | 'onPressMediaMessage'
->) => {
+>): CreateMessagePressActions => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
   const toast = useToast();
@@ -217,161 +222,186 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   const { clipboardService, fileService } = usePlatformService();
   const { sbOptions } = useSendbirdChat();
 
-  const onFailureToReSend = (error: Error) => {
+  const onResendFailure = (error: Error) => {
     toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error');
     Logger.error(STRINGS.TOAST.RESEND_MSG_ERROR, error);
   };
 
-  const handleFailedMessage = (message: HandleableMessage) => {
+  const onDeleteFailure = (error: Error) => {
+    toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
+    Logger.error(STRINGS.TOAST.DELETE_MSG_ERROR, error);
+  };
+
+  const onCopyText = (message: HandleableMessage) => {
+    if (message.isUserMessage()) {
+      clipboardService.setString(message.message || '');
+      toast.show(STRINGS.TOAST.COPY_OK, 'success');
+    }
+  };
+
+  const onDownloadFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      if (toMegabyte(message.size) > 4) {
+        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+      }
+
+      fileService
+        .save({ fileUrl: message.url, fileName: message.name, fileType: message.type })
+        .then((response) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+          Logger.log('File saved to', response);
+        })
+        .catch((err) => {
+          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+          Logger.log('File save failure', err);
+        });
+    }
+  };
+
+  const onOpenFile = (message: HandleableMessage) => {
+    if (message.isFileMessage()) {
+      const fileType = getFileType(message.type || getFileExtension(message.name));
+      if (['image', 'video', 'audio'].includes(fileType)) {
+        onPressMediaMessage?.(message, () => onDeleteMessage(message), getAvailableUriFromFileMessage(message));
+      } else {
+        SBUUtils.openURL(message.url);
+      }
+    }
+  };
+
+  const openSheetForFailedMessage = (message: HandleableMessage) => {
     openSheet({
       sheetItems: [
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
-          onPress: () => {
-            onResendFailedMessage(message).catch(onFailureToReSend);
-          },
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
         },
         {
           title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
           titleColor: colors.ui.dialog.default.none.destructive,
-          onPress: () => confirmDelete(message),
+          onPress: () => alertForMessageDelete(message),
         },
       ],
     });
   };
-  const confirmDelete = (message: HandleableMessage) => {
+
+  const alertForMessageDelete = (message: HandleableMessage) => {
     alert({
       title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
       buttons: [
-        {
-          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
-        },
+        { text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL },
         {
           text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
           style: 'destructive',
           onPress: () => {
-            onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error'));
+            onDeleteMessage(message).catch(onDeleteFailure);
           },
         },
       ],
     });
   };
 
-  return (msg: SendbirdMessage) => {
-    if (!msg.isUserMessage() && !msg.isFileMessage()) {
-      return { onPress: undefined, onLongPress: undefined };
-    }
+  return ({ message }) => {
+    if (!message.isUserMessage() && !message.isFileMessage()) return {};
 
     const sheetItems: BottomSheetItem['sheetItems'] = [];
-    const response: PressActions = {
-      onPress: undefined,
-      onLongPress: undefined,
-    };
-
-    if (msg.isUserMessage()) {
-      sheetItems.push({
-        icon: 'copy',
+    const menu = {
+      copy: (message: HandleableMessage) => ({
+        icon: 'copy' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
-        onPress: () => {
-          clipboardService.setString(msg.message || '');
-          toast.show(STRINGS.TOAST.COPY_OK, 'success');
-        },
-      });
-    }
-    if (!isVoiceMessage(msg) && msg.isFileMessage()) {
-      sheetItems.push({
-        icon: 'download',
+        onPress: () => onCopyText(message),
+      }),
+      edit: (message: HandleableMessage) => ({
+        icon: 'edit' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+        onPress: () => onEditMessage(message),
+      }),
+      delete: (message: HandleableMessage) => ({
+        disabled: message.threadInfo ? message.threadInfo.replyCount > 0 : undefined,
+        icon: 'delete' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+        onPress: () => alertForMessageDelete(message),
+      }),
+      reply: (message: HandleableMessage) => ({
+        disabled: Boolean(message.parentMessageId),
+        icon: 'reply' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
+        onPress: () => onReplyMessage?.(message),
+      }),
+      download: (message: HandleableMessage) => ({
+        icon: 'download' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
-        onPress: async () => {
-          if (toMegabyte(msg.size) > 4) {
-            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
-          }
-
-          fileService
-            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.type })
-            .then((response) => {
-              toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
-              Logger.log('File saved to', response);
-            })
-            .catch((err) => {
-              toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
-              Logger.log('File save failure', err);
-            });
-        },
-      });
-    }
+        onPress: () => onDownloadFile(message),
+      }),
+    };
 
-    if (!channel.isEphemeral) {
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        if (msg.isUserMessage()) {
-          sheetItems.push({
-            icon: 'edit',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-            onPress: () => onEditMessage(msg),
-          });
+    if (message.isUserMessage()) {
+      sheetItems.push(menu.copy(message));
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.edit(message));
+          sheetItems.push(menu.delete(message));
+        }
+        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+          sheetItems.push(menu.reply(message));
         }
-        sheetItems.push({
-          disabled: msg.threadInfo ? msg.threadInfo.replyCount > 0 : undefined,
-          icon: 'delete',
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-          onPress: () => confirmDelete(msg),
-        });
-      }
-      if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
-        sheetItems.push({
-          disabled: Boolean(msg.parentMessageId),
-          icon: 'reply',
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
-          onPress: () => onReplyMessage?.(msg),
-        });
       }
     }
 
-    if (msg.isFileMessage()) {
-      const fileType = getFileType(msg.type || getFileExtension(msg.name));
-      switch (fileType) {
-        case 'image':
-        case 'video':
-        case 'audio': {
-          response.onPress = () => {
-            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
-          };
-          break;
+    if (message.isFileMessage()) {
+      if (!isVoiceMessage(message)) {
+        sheetItems.push(menu.download(message));
+      }
+      if (!channel.isEphemeral) {
+        if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
+          sheetItems.push(menu.delete(message));
         }
-        default: {
-          response.onPress = () => SBUUtils.openURL(msg.url);
-          break;
+        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+          sheetItems.push(menu.reply(message));
         }
       }
     }
 
-    if (sheetItems.length > 0) {
-      response.onLongPress = () => {
-        openSheet({
-          sheetItems,
-          HeaderComponent: shouldRenderReaction(
-            channel,
-            sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions,
-          )
-            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
-            : undefined,
-        });
-      };
-    }
+    const bottomSheetItem: BottomSheetItem = {
+      sheetItems,
+      HeaderComponent: shouldRenderReaction(channel, sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions)
+        ? ({ onClose }) => <ReactionAddons.BottomSheet message={message} channel={channel} onClose={onClose} />
+        : undefined,
+    };
 
-    if (msg.sendingStatus === 'failed') {
-      response.onLongPress = () => handleFailedMessage(msg);
-      response.onPress = () => {
-        onResendFailedMessage(msg).catch(onFailureToReSend);
-      };
-    }
+    switch (true) {
+      case message.sendingStatus === 'pending': {
+        return {
+          onPress: undefined,
+          onLongPress: undefined,
+          bottomSheetItem: undefined,
+        };
+      }
 
-    if (msg.sendingStatus === 'pending') {
-      response.onLongPress = undefined;
-      response.onPress = undefined;
-    }
+      case message.sendingStatus === 'failed': {
+        return {
+          onPress: () => onResendFailedMessage(message).catch(onResendFailure),
+          onLongPress: () => openSheetForFailedMessage(message),
+          bottomSheetItem,
+        };
+      }
+
+      case message.isFileMessage(): {
+        return {
+          onPress: () => onOpenFile(message),
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
 
-    return response;
+      default: {
+        return {
+          onPress: undefined,
+          onLongPress: () => openSheet(bottomSheetItem),
+          bottomSheetItem,
+        };
+      }
+    }
   };
 };
 

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;