@sendbird/uikit-react-native 3.2.0 → 3.4.0

package/lib/module/components/FileViewer.js

@@ -1,291 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Icon, Image, LoadingSpinner, Text, createStyleSheet, useAlert, useHeaderStyle, useToast, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte, truncate, useIIFE } from '@sendbird/uikit-utils';
-import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
-const FileViewer = _ref => {
-  let {
-    headerShown = true,
-    deleteMessage,
-    headerTopInset,
-    fileMessage,
-    onPressDownload,
-    onPressDelete,
-    onClose
-  } = _ref;
-  const [loading, setLoading] = useState(true);
-  const {
-    bottom
-  } = useSafeAreaInsets();
-  const {
-    currentUser
-  } = useSendbirdChat();
-  const {
-    palette
-  } = useUIKitTheme();
-  const {
-    topInset,
-    statusBarTranslucent,
-    defaultHeight
-  } = useHeaderStyle();
-  const {
-    STRINGS
-  } = useLocalization();
-  const {
-    fileService,
-    mediaService
-  } = usePlatformService();
-  const toast = useToast();
-  const {
-    alert
-  } = useAlert();
-  const basicTopInset = statusBarTranslucent ? topInset : 0;
-  const canDelete = isMyMessage(fileMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
-  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
-  useEffect(() => {
-    if (fileType === 'file') onClose();
-  }, []);
-  const fileViewer = useIIFE(() => {
-    switch (fileType) {
-      case 'image':
-        {
-          return /*#__PURE__*/React.createElement(Image, {
-            source: {
-              uri: fileMessage.url
-            },
-            style: StyleSheet.absoluteFill,
-            resizeMode: 'contain',
-            onLoadEnd: () => setLoading(false)
-          });
-        }
-      case 'video':
-      case 'audio':
-        {
-          return /*#__PURE__*/React.createElement(mediaService.VideoComponent, {
-            source: {
-              uri: fileMessage.url
-            },
-            style: [StyleSheet.absoluteFill, {
-              top: basicTopInset + defaultHeight,
-              bottom: defaultHeight + bottom
-            }],
-            resizeMode: 'contain',
-            onLoad: () => setLoading(false)
-          });
-        }
-      default:
-        {
-          return null;
-        }
-    }
-  });
-  const _onPressDelete = () => {
-    if (!canDelete) return;
-    if (onPressDelete) {
-      onPressDelete(fileMessage);
-    } else {
-      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_OK,
-          style: 'destructive',
-          onPress: () => {
-            deleteMessage().then(() => {
-              onClose();
-            }).catch(() => {
-              toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
-            });
-          }
-        }]
-      });
-    }
-  };
-  const _onPressDownload = () => {
-    if (onPressDownload) {
-      onPressDownload(fileMessage);
-    } else {
-      if (toMegabyte(fileMessage.size) > 4) {
-        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
-      }
-      fileService.save({
-        fileUrl: fileMessage.url,
-        fileName: fileMessage.name,
-        fileType: fileMessage.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);
-      });
-    }
-  };
-  return /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      backgroundColor: palette.background700
-    }
-  }, /*#__PURE__*/React.createElement(StatusBar, {
-    barStyle: 'light-content',
-    animated: true
-  }), /*#__PURE__*/React.createElement(View, {
-    style: {
-      flex: 1,
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, fileViewer, loading && /*#__PURE__*/React.createElement(LoadingSpinner, {
-    style: {
-      position: 'absolute'
-    },
-    size: 40,
-    color: palette.primary300
-  })), headerShown && /*#__PURE__*/React.createElement(FileViewerHeader, {
-    title: STRINGS.FILE_VIEWER.TITLE(fileMessage),
-    subtitle: STRINGS.FILE_VIEWER.SUBTITLE(fileMessage),
-    topInset: headerTopInset ?? basicTopInset,
-    onClose: onClose
-  }), /*#__PURE__*/React.createElement(FileViewerFooter, {
-    bottomInset: bottom,
-    deleteShown: canDelete,
-    onPressDelete: _onPressDelete,
-    onPressDownload: _onPressDownload
-  }));
-};
-const FileViewerHeader = _ref2 => {
-  let {
-    topInset,
-    onClose,
-    subtitle,
-    title
-  } = _ref2;
-  const {
-    palette
-  } = useUIKitTheme();
-  const {
-    defaultHeight
-  } = useHeaderStyle();
-  const {
-    left,
-    right
-  } = useSafeAreaInsets();
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.headerContainer, {
-      paddingLeft: styles.headerContainer.paddingHorizontal + left,
-      paddingRight: styles.headerContainer.paddingHorizontal + right
-    }, {
-      paddingTop: topInset,
-      height: defaultHeight + topInset,
-      backgroundColor: palette.overlay01
-    }]
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: onClose,
-    style: styles.barButton
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'close',
-    size: 24,
-    color: palette.onBackgroundDark01
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles.barTitleContainer
-  }, /*#__PURE__*/React.createElement(Text, {
-    h2: true,
-    color: palette.onBackgroundDark01,
-    style: styles.headerTitle,
-    numberOfLines: 1
-  }, truncate(title, {
-    mode: 'mid',
-    maxLen: 18
-  })), /*#__PURE__*/React.createElement(Text, {
-    caption2: true,
-    color: palette.onBackgroundDark01,
-    numberOfLines: 1
-  }, subtitle)), /*#__PURE__*/React.createElement(View, {
-    style: styles.barButton
-  }));
-};
-const FileViewerFooter = _ref3 => {
-  let {
-    bottomInset,
-    deleteShown,
-    onPressDelete,
-    onPressDownload
-  } = _ref3;
-  const {
-    palette
-  } = useUIKitTheme();
-  const {
-    defaultHeight
-  } = useHeaderStyle();
-  const {
-    left,
-    right
-  } = useSafeAreaInsets();
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.footerContainer, {
-      paddingLeft: styles.headerContainer.paddingHorizontal + left,
-      paddingRight: styles.headerContainer.paddingHorizontal + right
-    }, {
-      paddingBottom: bottomInset,
-      height: defaultHeight + bottomInset,
-      backgroundColor: palette.overlay01
-    }]
-  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: onPressDownload,
-    style: styles.barButton
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: 'download',
-    size: 24,
-    color: palette.onBackgroundDark01
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styles.barTitleContainer
-  }), /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: onPressDelete,
-    style: styles.barButton,
-    disabled: !deleteShown
-  }, deleteShown && /*#__PURE__*/React.createElement(Icon, {
-    icon: 'delete',
-    size: 24,
-    color: palette.onBackgroundDark01
-  })));
-};
-const styles = createStyleSheet({
-  headerContainer: {
-    top: 0,
-    left: 0,
-    right: 0,
-    position: 'absolute',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12
-  },
-  barButton: {
-    width: 32,
-    height: 32,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  barTitleContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  headerTitle: {
-    marginBottom: 2
-  },
-  footerContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12
-  }
-});
-export default FileViewer;
-//# sourceMappingURL=FileViewer.js.map

package/lib/module/components/FileViewer.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","useEffect","useState","StatusBar","StyleSheet","TouchableOpacity","View","useSafeAreaInsets","Icon","Image","LoadingSpinner","Text","createStyleSheet","useAlert","useHeaderStyle","useToast","useUIKitTheme","Logger","getFileExtension","getFileType","isMyMessage","toMegabyte","truncate","useIIFE","useLocalization","usePlatformService","useSendbirdChat","FileViewer","_ref","headerShown","deleteMessage","headerTopInset","fileMessage","onPressDownload","onPressDelete","onClose","loading","setLoading","bottom","currentUser","palette","topInset","statusBarTranslucent","defaultHeight","STRINGS","fileService","mediaService","toast","alert","basicTopInset","canDelete","userId","fileType","type","url","fileViewer","createElement","source","uri","style","absoluteFill","resizeMode","onLoadEnd","VideoComponent","top","onLoad","_onPressDelete","title","LABELS","CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE","buttons","text","CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL","CHANNEL_MESSAGE_DELETE_CONFIRM_OK","onPress","then","catch","show","TOAST","DELETE_MSG_ERROR","_onPressDownload","size","DOWNLOAD_START","save","fileUrl","fileName","name","response","DOWNLOAD_OK","log","err","DOWNLOAD_ERROR","flex","backgroundColor","background700","barStyle","animated","alignItems","justifyContent","position","color","primary300","FileViewerHeader","FILE_VIEWER","TITLE","subtitle","SUBTITLE","FileViewerFooter","bottomInset","deleteShown","_ref2","left","right","styles","headerContainer","paddingLeft","paddingHorizontal","paddingRight","paddingTop","height","overlay01","barButton","icon","onBackgroundDark01","barTitleContainer","h2","headerTitle","numberOfLines","mode","maxLen","caption2","_ref3","footerContainer","paddingBottom","disabled","flexDirection","width","marginBottom"],"sources":["FileViewer.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport {\n  Icon,\n  Image,\n  LoadingSpinner,\n  Text,\n  createStyleSheet,\n  useAlert,\n  useHeaderStyle,\n  useToast,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport {\n  Logger,\n  getFileExtension,\n  getFileType,\n  isMyMessage,\n  toMegabyte,\n  truncate,\n  useIIFE,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';\n\ntype Props = {\n  fileMessage: SendbirdFileMessage;\n  deleteMessage: () => Promise<void>;\n\n  onClose: () => void;\n  onPressDownload?: (message: SendbirdFileMessage) => void;\n  onPressDelete?: (message: SendbirdFileMessage) => void;\n\n  headerShown?: boolean;\n  headerTopInset?: number;\n};\nconst FileViewer = ({\n  headerShown = true,\n  deleteMessage,\n  headerTopInset,\n  fileMessage,\n  onPressDownload,\n  onPressDelete,\n  onClose,\n}: Props) => {\n  const [loading, setLoading] = useState(true);\n\n  const { bottom } = useSafeAreaInsets();\n\n  const { currentUser } = useSendbirdChat();\n  const { palette } = useUIKitTheme();\n  const { topInset, statusBarTranslucent, defaultHeight } = useHeaderStyle();\n  const { STRINGS } = useLocalization();\n  const { fileService, mediaService } = usePlatformService();\n  const toast = useToast();\n  const { alert } = useAlert();\n\n  const basicTopInset = statusBarTranslucent ? topInset : 0;\n  const canDelete = isMyMessage(fileMessage, currentUser?.userId);\n  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));\n\n  useEffect(() => {\n    if (fileType === 'file') onClose();\n  }, []);\n\n  const fileViewer = useIIFE(() => {\n    switch (fileType) {\n      case 'image': {\n        return (\n          <Image\n            source={{ uri: fileMessage.url }}\n            style={StyleSheet.absoluteFill}\n            resizeMode={'contain'}\n            onLoadEnd={() => setLoading(false)}\n          />\n        );\n      }\n\n      case 'video':\n      case 'audio': {\n        return (\n          <mediaService.VideoComponent\n            source={{ uri: fileMessage.url }}\n            style={[StyleSheet.absoluteFill, { top: basicTopInset + defaultHeight, bottom: defaultHeight + bottom }]}\n            resizeMode={'contain'}\n            onLoad={() => setLoading(false)}\n          />\n        );\n      }\n\n      default: {\n        return null;\n      }\n    }\n  });\n\n  const _onPressDelete = () => {\n    if (!canDelete) return;\n\n    if (onPressDelete) {\n      onPressDelete(fileMessage);\n    } else {\n      alert({\n        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,\n        buttons: [\n          {\n            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,\n          },\n          {\n            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,\n            style: 'destructive',\n            onPress: () => {\n              deleteMessage()\n                .then(() => {\n                  onClose();\n                })\n                .catch(() => {\n                  toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');\n                });\n            },\n          },\n        ],\n      });\n    }\n  };\n\n  const _onPressDownload = () => {\n    if (onPressDownload) {\n      onPressDownload(fileMessage);\n    } else {\n      if (toMegabyte(fileMessage.size) > 4) {\n        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');\n      }\n\n      fileService\n        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.type })\n        .then((response) => {\n          toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');\n          Logger.log('File saved to', response);\n        })\n        .catch((err) => {\n          toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');\n          Logger.log('File save failure', err);\n        });\n    }\n  };\n\n  return (\n    <View style={{ flex: 1, backgroundColor: palette.background700 }}>\n      <StatusBar barStyle={'light-content'} animated />\n      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n        {fileViewer}\n        {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}\n      </View>\n      {headerShown && (\n        <FileViewerHeader\n          title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}\n          subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}\n          topInset={headerTopInset ?? basicTopInset}\n          onClose={onClose}\n        />\n      )}\n      <FileViewerFooter\n        bottomInset={bottom}\n        deleteShown={canDelete}\n        onPressDelete={_onPressDelete}\n        onPressDownload={_onPressDownload}\n      />\n    </View>\n  );\n};\n\ntype HeaderProps = {\n  topInset: number;\n  onClose: () => void;\n  title: string;\n  subtitle: string;\n};\nconst FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <View\n      style={[\n        styles.headerContainer,\n        {\n          paddingLeft: styles.headerContainer.paddingHorizontal + left,\n          paddingRight: styles.headerContainer.paddingHorizontal + right,\n        },\n        { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },\n      ]}\n    >\n      <TouchableOpacity onPress={onClose} style={styles.barButton}>\n        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />\n      </TouchableOpacity>\n      <View style={styles.barTitleContainer}>\n        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle} numberOfLines={1}>\n          {truncate(title, { mode: 'mid', maxLen: 18 })}\n        </Text>\n        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>\n          {subtitle}\n        </Text>\n      </View>\n      <View style={styles.barButton} />\n    </View>\n  );\n};\n\ntype FooterProps = {\n  bottomInset: number;\n  deleteShown: boolean;\n  onPressDelete: () => void;\n  onPressDownload: () => void;\n};\nconst FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: FooterProps) => {\n  const { palette } = useUIKitTheme();\n  const { defaultHeight } = useHeaderStyle();\n  const { left, right } = useSafeAreaInsets();\n\n  return (\n    <View\n      style={[\n        styles.footerContainer,\n        {\n          paddingLeft: styles.headerContainer.paddingHorizontal + left,\n          paddingRight: styles.headerContainer.paddingHorizontal + right,\n        },\n        {\n          paddingBottom: bottomInset,\n          height: defaultHeight + bottomInset,\n          backgroundColor: palette.overlay01,\n        },\n      ]}\n    >\n      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>\n        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />\n      </TouchableOpacity>\n      <View style={styles.barTitleContainer} />\n      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>\n        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  headerContainer: {\n    top: 0,\n    left: 0,\n    right: 0,\n    position: 'absolute',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n  barButton: {\n    width: 32,\n    height: 32,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  barTitleContainer: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  headerTitle: {\n    marginBottom: 2,\n  },\n  footerContainer: {\n    position: 'absolute',\n    left: 0,\n    right: 0,\n    bottom: 0,\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n  },\n});\n\nexport default FileViewer;\n"],"mappings":"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"}

package/src/components/FileViewer.tsx

@@ -1,288 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import {
-  Icon,
-  Image,
-  LoadingSpinner,
-  Text,
-  createStyleSheet,
-  useAlert,
-  useHeaderStyle,
-  useToast,
-  useUIKitTheme,
-} from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import {
-  Logger,
-  getFileExtension,
-  getFileType,
-  isMyMessage,
-  toMegabyte,
-  truncate,
-  useIIFE,
-} from '@sendbird/uikit-utils';
-
-import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
-
-type Props = {
-  fileMessage: SendbirdFileMessage;
-  deleteMessage: () => Promise<void>;
-
-  onClose: () => void;
-  onPressDownload?: (message: SendbirdFileMessage) => void;
-  onPressDelete?: (message: SendbirdFileMessage) => void;
-
-  headerShown?: boolean;
-  headerTopInset?: number;
-};
-const FileViewer = ({
-  headerShown = true,
-  deleteMessage,
-  headerTopInset,
-  fileMessage,
-  onPressDownload,
-  onPressDelete,
-  onClose,
-}: Props) => {
-  const [loading, setLoading] = useState(true);
-
-  const { bottom } = useSafeAreaInsets();
-
-  const { currentUser } = useSendbirdChat();
-  const { palette } = useUIKitTheme();
-  const { topInset, statusBarTranslucent, defaultHeight } = useHeaderStyle();
-  const { STRINGS } = useLocalization();
-  const { fileService, mediaService } = usePlatformService();
-  const toast = useToast();
-  const { alert } = useAlert();
-
-  const basicTopInset = statusBarTranslucent ? topInset : 0;
-  const canDelete = isMyMessage(fileMessage, currentUser?.userId);
-  const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
-
-  useEffect(() => {
-    if (fileType === 'file') onClose();
-  }, []);
-
-  const fileViewer = useIIFE(() => {
-    switch (fileType) {
-      case 'image': {
-        return (
-          <Image
-            source={{ uri: fileMessage.url }}
-            style={StyleSheet.absoluteFill}
-            resizeMode={'contain'}
-            onLoadEnd={() => setLoading(false)}
-          />
-        );
-      }
-
-      case 'video':
-      case 'audio': {
-        return (
-          <mediaService.VideoComponent
-            source={{ uri: fileMessage.url }}
-            style={[StyleSheet.absoluteFill, { top: basicTopInset + defaultHeight, bottom: defaultHeight + bottom }]}
-            resizeMode={'contain'}
-            onLoad={() => setLoading(false)}
-          />
-        );
-      }
-
-      default: {
-        return null;
-      }
-    }
-  });
-
-  const _onPressDelete = () => {
-    if (!canDelete) return;
-
-    if (onPressDelete) {
-      onPressDelete(fileMessage);
-    } else {
-      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_OK,
-            style: 'destructive',
-            onPress: () => {
-              deleteMessage()
-                .then(() => {
-                  onClose();
-                })
-                .catch(() => {
-                  toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error');
-                });
-            },
-          },
-        ],
-      });
-    }
-  };
-
-  const _onPressDownload = () => {
-    if (onPressDownload) {
-      onPressDownload(fileMessage);
-    } else {
-      if (toMegabyte(fileMessage.size) > 4) {
-        toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
-      }
-
-      fileService
-        .save({ fileUrl: fileMessage.url, fileName: fileMessage.name, fileType: fileMessage.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);
-        });
-    }
-  };
-
-  return (
-    <View style={{ flex: 1, backgroundColor: palette.background700 }}>
-      <StatusBar barStyle={'light-content'} animated />
-      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-        {fileViewer}
-        {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}
-      </View>
-      {headerShown && (
-        <FileViewerHeader
-          title={STRINGS.FILE_VIEWER.TITLE(fileMessage)}
-          subtitle={STRINGS.FILE_VIEWER.SUBTITLE(fileMessage)}
-          topInset={headerTopInset ?? basicTopInset}
-          onClose={onClose}
-        />
-      )}
-      <FileViewerFooter
-        bottomInset={bottom}
-        deleteShown={canDelete}
-        onPressDelete={_onPressDelete}
-        onPressDownload={_onPressDownload}
-      />
-    </View>
-  );
-};
-
-type HeaderProps = {
-  topInset: number;
-  onClose: () => void;
-  title: string;
-  subtitle: string;
-};
-const FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) => {
-  const { palette } = useUIKitTheme();
-  const { defaultHeight } = useHeaderStyle();
-  const { left, right } = useSafeAreaInsets();
-
-  return (
-    <View
-      style={[
-        styles.headerContainer,
-        {
-          paddingLeft: styles.headerContainer.paddingHorizontal + left,
-          paddingRight: styles.headerContainer.paddingHorizontal + right,
-        },
-        { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },
-      ]}
-    >
-      <TouchableOpacity onPress={onClose} style={styles.barButton}>
-        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
-      </TouchableOpacity>
-      <View style={styles.barTitleContainer}>
-        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle} numberOfLines={1}>
-          {truncate(title, { mode: 'mid', maxLen: 18 })}
-        </Text>
-        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>
-          {subtitle}
-        </Text>
-      </View>
-      <View style={styles.barButton} />
-    </View>
-  );
-};
-
-type FooterProps = {
-  bottomInset: number;
-  deleteShown: boolean;
-  onPressDelete: () => void;
-  onPressDownload: () => void;
-};
-const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: FooterProps) => {
-  const { palette } = useUIKitTheme();
-  const { defaultHeight } = useHeaderStyle();
-  const { left, right } = useSafeAreaInsets();
-
-  return (
-    <View
-      style={[
-        styles.footerContainer,
-        {
-          paddingLeft: styles.headerContainer.paddingHorizontal + left,
-          paddingRight: styles.headerContainer.paddingHorizontal + right,
-        },
-        {
-          paddingBottom: bottomInset,
-          height: defaultHeight + bottomInset,
-          backgroundColor: palette.overlay01,
-        },
-      ]}
-    >
-      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>
-        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
-      </TouchableOpacity>
-      <View style={styles.barTitleContainer} />
-      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
-        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const styles = createStyleSheet({
-  headerContainer: {
-    top: 0,
-    left: 0,
-    right: 0,
-    position: 'absolute',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12,
-  },
-  barButton: {
-    width: 32,
-    height: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  barTitleContainer: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  headerTitle: {
-    marginBottom: 2,
-  },
-  footerContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12,
-  },
-});
-
-export default FileViewer;