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

package/README.md

@@ -46,7 +46,7 @@ UIKit for React-Native can be installed through either `yarn` or `npm`
 
 ```sh
 npm i @sendbird/uikit-react-native \
-      sendbird \
+      @sendbird/chat \
       date-fns \
       react-native-safe-area-context \
       @react-native-community/netinfo

package/lib/commonjs/components/ChatFlatList.js

@@ -94,19 +94,21 @@ const ChatFlatList = /*#__PURE__*/(0, _react.forwardRef)(function CustomFlatList
     console.warn('UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\nhttps://github.com/facebook/react-native/issues/30034');
   }
 
-  return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({}, props, {
-    // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
-    inverted: Boolean((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}
-    // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}
-    ,
-    ref: scrollRef,
+  return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, _extends({
     bounces: false,
+    removeClippedSubviews: true,
+    keyboardDismissMode: 'on-drag',
     keyboardShouldPersistTaps: 'handled',
     indicatorStyle: select({
       light: 'black',
       dark: 'white'
-    }),
-    removeClippedSubviews: true,
+    })
+  }, props, {
+    // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}
+    inverted: Boolean((_props$data = props.data) === null || _props$data === void 0 ? void 0 : _props$data.length) // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}
+    // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}
+    ,
+    ref: scrollRef,
     onEndReachedThreshold: 0.5,
     onEndReached: onTopReached,
     scrollEventThrottle: 16,

package/lib/commonjs/components/ChatFlatList.js.map

@@ -1 +1 @@
-{"version":3,"names":["ANDROID_BUG_ALERT_SHOWED","Platform","OS","BOTTOM_DETECT_THRESHOLD","hasReachedToBottom","yPos","thresholdPx","ChatFlatList","forwardRef","CustomFlatList","ref","onTopReached","nextMessages","onBottomReached","onLeaveScrollBottom","onScroll","currentUserId","props","select","useUIKitTheme","scrollRef","useRef","useImperativeHandle","scrollToBottom","animated","current","scrollToOffset","offset","useEffect","latestMessage","length","isMyMessage","_onScroll","useCallback","event","contentOffset","nativeEvent","y","__DEV__","console","warn","Boolean","data","light","dark"],"sources":["ChatFlatList.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlatList, FlatListProps, Platform } from 'react-native';\n\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdMessage, isMyMessage } from '@sendbird/uikit-utils';\n\nlet ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';\nconst BOTTOM_DETECT_THRESHOLD = 25;\n// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;\n\nfunction hasReachedToBottom(yPos: number, thresholdPx = 0) {\n  return thresholdPx >= yPos;\n}\n\nexport type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };\ntype Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {\n  currentUserId?: string;\n  onBottomReached: () => void;\n  onTopReached: () => void;\n  nextMessages: SendbirdMessage[];\n  onLeaveScrollBottom: (value: boolean) => void;\n};\n// FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}\nconst ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(\n  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },\n  ref,\n) {\n  const { select } = useUIKitTheme();\n  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);\n  const yPos = useRef(0);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const latestMessage = nextMessages[nextMessages.length - 1];\n    if (!latestMessage) return;\n\n    if (hasReachedToBottom(yPos.current)) {\n      onBottomReached();\n    } else if (isMyMessage(latestMessage, currentUserId)) {\n      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });\n    }\n  }, [onBottomReached, nextMessages, currentUserId]);\n\n  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(\n    (event) => {\n      const { contentOffset } = event.nativeEvent;\n      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(false);\n      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(true);\n      }\n\n      yPos.current = contentOffset.y;\n\n      onScroll?.(event);\n      if (hasReachedToBottom(yPos.current)) onBottomReached();\n    },\n    [onScroll, onBottomReached],\n  );\n\n  if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {\n    ANDROID_BUG_ALERT_SHOWED = true;\n    // eslint-disable-next-line no-console\n    console.warn(\n      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\\nhttps://github.com/facebook/react-native/issues/30034',\n    );\n  }\n\n  return (\n    <FlatList\n      {...props}\n      // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}\n      inverted={Boolean(props.data?.length)}\n      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}\n      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}\n      ref={scrollRef}\n      bounces={false}\n      keyboardShouldPersistTaps={'handled'}\n      indicatorStyle={select({ light: 'black', dark: 'white' })}\n      removeClippedSubviews\n      onEndReachedThreshold={0.5}\n      onEndReached={onTopReached}\n      scrollEventThrottle={16}\n      onScroll={_onScroll}\n    />\n  );\n});\n\nexport default ChatFlatList;\n"],"mappings":"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"}
+{"version":3,"names":["ANDROID_BUG_ALERT_SHOWED","Platform","OS","BOTTOM_DETECT_THRESHOLD","hasReachedToBottom","yPos","thresholdPx","ChatFlatList","forwardRef","CustomFlatList","ref","onTopReached","nextMessages","onBottomReached","onLeaveScrollBottom","onScroll","currentUserId","props","select","useUIKitTheme","scrollRef","useRef","useImperativeHandle","scrollToBottom","animated","current","scrollToOffset","offset","useEffect","latestMessage","length","isMyMessage","_onScroll","useCallback","event","contentOffset","nativeEvent","y","__DEV__","console","warn","light","dark","Boolean","data"],"sources":["ChatFlatList.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { FlatList, FlatListProps, Platform } from 'react-native';\n\nimport { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdMessage, isMyMessage } from '@sendbird/uikit-utils';\n\nlet ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';\nconst BOTTOM_DETECT_THRESHOLD = 25;\n// const AUTO_SCROLL_TO_TOP_THRESHOLD = 15;\n\nfunction hasReachedToBottom(yPos: number, thresholdPx = 0) {\n  return thresholdPx >= yPos;\n}\n\nexport type ChatFlatListRef = { scrollToBottom: (animated?: boolean) => void };\ntype Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {\n  currentUserId?: string;\n  onBottomReached: () => void;\n  onTopReached: () => void;\n  nextMessages: SendbirdMessage[];\n  onLeaveScrollBottom: (value: boolean) => void;\n};\n// FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}\nconst ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(\n  { onTopReached, nextMessages, onBottomReached, onLeaveScrollBottom, onScroll, currentUserId, ...props },\n  ref,\n) {\n  const { select } = useUIKitTheme();\n  const scrollRef = useRef<FlatList<SendbirdMessage>>(null);\n  const yPos = useRef(0);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToBottom: (animated = true) => scrollRef.current?.scrollToOffset({ animated, offset: 0 }),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    const latestMessage = nextMessages[nextMessages.length - 1];\n    if (!latestMessage) return;\n\n    if (hasReachedToBottom(yPos.current)) {\n      onBottomReached();\n    } else if (isMyMessage(latestMessage, currentUserId)) {\n      scrollRef.current?.scrollToOffset({ animated: false, offset: 0 });\n    }\n  }, [onBottomReached, nextMessages, currentUserId]);\n\n  const _onScroll = useCallback<NonNullable<Props['onScroll']>>(\n    (event) => {\n      const { contentOffset } = event.nativeEvent;\n      if (BOTTOM_DETECT_THRESHOLD < yPos.current && contentOffset.y <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(false);\n      } else if (BOTTOM_DETECT_THRESHOLD < contentOffset.y && yPos.current <= BOTTOM_DETECT_THRESHOLD) {\n        onLeaveScrollBottom(true);\n      }\n\n      yPos.current = contentOffset.y;\n\n      onScroll?.(event);\n      if (hasReachedToBottom(yPos.current)) onBottomReached();\n    },\n    [onScroll, onBottomReached],\n  );\n\n  if (__DEV__ && !ANDROID_BUG_ALERT_SHOWED) {\n    ANDROID_BUG_ALERT_SHOWED = true;\n    // eslint-disable-next-line no-console\n    console.warn(\n      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\\nhttps://github.com/facebook/react-native/issues/30034',\n    );\n  }\n\n  return (\n    <FlatList\n      bounces={false}\n      removeClippedSubviews\n      keyboardDismissMode={'on-drag'}\n      keyboardShouldPersistTaps={'handled'}\n      indicatorStyle={select({ light: 'black', dark: 'white' })}\n      {...props}\n      // FIXME: inverted list of ListEmptyComponent is reversed {@link https://github.com/facebook/react-native/issues/21196#issuecomment-836937743}\n      inverted={Boolean(props.data?.length)}\n      // FIXME: maintainVisibleContentPosition is not working on Android {@link https://github.com/facebook/react-native/issues/25239}\n      // maintainVisibleContentPosition={{ minIndexForVisible: 1, autoscrollToTopThreshold: AUTO_SCROLL_TO_TOP_THRESHOLD }}\n      ref={scrollRef}\n      onEndReachedThreshold={0.5}\n      onEndReached={onTopReached}\n      scrollEventThrottle={16}\n      onScroll={_onScroll}\n    />\n  );\n});\n\nexport default ChatFlatList;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;AAEA,IAAIA,wBAAwB,GAAGC,qBAAA,CAASC,EAAT,KAAgB,SAA/C;AACA,MAAMC,uBAAuB,GAAG,EAAhC,C,CACA;;AAEA,SAASC,kBAAT,CAA4BC,IAA5B,EAA2D;EAAA,IAAjBC,WAAiB,uEAAH,CAAG;EACzD,OAAOA,WAAW,IAAID,IAAtB;AACD;;AAUD;AACA,MAAME,YAAY,gBAAG,IAAAC,iBAAA,EAAmC,SAASC,cAAT,OAEtDC,GAFsD,EAGtD;EAAA;;EAAA,IAFA;IAAEC,YAAF;IAAgBC,YAAhB;IAA8BC,eAA9B;IAA+CC,mBAA/C;IAAoEC,QAApE;IAA8EC,aAA9E;IAA6F,GAAGC;EAAhG,CAEA;EACA,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,SAAS,GAAG,IAAAC,aAAA,EAAkC,IAAlC,CAAlB;EACA,MAAMhB,IAAI,GAAG,IAAAgB,aAAA,EAAO,CAAP,CAAb;EAEA,IAAAC,0BAAA,EACEZ,GADF,EAEE,OAAO;IACLa,cAAc,EAAE;MAAA;;MAAA,IAACC,QAAD,uEAAY,IAAZ;MAAA,6BAAqBJ,SAAS,CAACK,OAA/B,uDAAqB,mBAAmBC,cAAnB,CAAkC;QAAEF,QAAF;QAAYG,MAAM,EAAE;MAApB,CAAlC,CAArB;IAAA;EADX,CAAP,CAFF,EAKE,EALF;EAQA,IAAAC,gBAAA,EAAU,MAAM;IACd,MAAMC,aAAa,GAAGjB,YAAY,CAACA,YAAY,CAACkB,MAAb,GAAsB,CAAvB,CAAlC;IACA,IAAI,CAACD,aAAL,EAAoB;;IAEpB,IAAIzB,kBAAkB,CAACC,IAAI,CAACoB,OAAN,CAAtB,EAAsC;MACpCZ,eAAe;IAChB,CAFD,MAEO,IAAI,IAAAkB,uBAAA,EAAYF,aAAZ,EAA2Bb,aAA3B,CAAJ,EAA+C;MAAA;;MACpD,uBAAAI,SAAS,CAACK,OAAV,4EAAmBC,cAAnB,CAAkC;QAAEF,QAAQ,EAAE,KAAZ;QAAmBG,MAAM,EAAE;MAA3B,CAAlC;IACD;EACF,CATD,EASG,CAACd,eAAD,EAAkBD,YAAlB,EAAgCI,aAAhC,CATH;;EAWA,MAAMgB,SAAS,GAAG,IAAAC,kBAAA,EACfC,KAAD,IAAW;IACT,MAAM;MAAEC;IAAF,IAAoBD,KAAK,CAACE,WAAhC;;IACA,IAAIjC,uBAAuB,GAAGE,IAAI,CAACoB,OAA/B,IAA0CU,aAAa,CAACE,CAAd,IAAmBlC,uBAAjE,EAA0F;MACxFW,mBAAmB,CAAC,KAAD,CAAnB;IACD,CAFD,MAEO,IAAIX,uBAAuB,GAAGgC,aAAa,CAACE,CAAxC,IAA6ChC,IAAI,CAACoB,OAAL,IAAgBtB,uBAAjE,EAA0F;MAC/FW,mBAAmB,CAAC,IAAD,CAAnB;IACD;;IAEDT,IAAI,CAACoB,OAAL,GAAeU,aAAa,CAACE,CAA7B;IAEAtB,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGmB,KAAH,CAAR;IACA,IAAI9B,kBAAkB,CAACC,IAAI,CAACoB,OAAN,CAAtB,EAAsCZ,eAAe;EACtD,CAbe,EAchB,CAACE,QAAD,EAAWF,eAAX,CAdgB,CAAlB;;EAiBA,IAAIyB,OAAO,IAAI,CAACtC,wBAAhB,EAA0C;IACxCA,wBAAwB,GAAG,IAA3B,CADwC,CAExC;;IACAuC,OAAO,CAACC,IAAR,CACE,mKADF;EAGD;;EAED,oBACE,6BAAC,qBAAD;IACE,OAAO,EAAE,KADX;IAEE,qBAAqB,MAFvB;IAGE,mBAAmB,EAAE,SAHvB;IAIE,yBAAyB,EAAE,SAJ7B;IAKE,cAAc,EAAEtB,MAAM,CAAC;MAAEuB,KAAK,EAAE,OAAT;MAAkBC,IAAI,EAAE;IAAxB,CAAD;EALxB,GAMMzB,KANN;IAOE;IACA,QAAQ,EAAE0B,OAAO,gBAAC1B,KAAK,CAAC2B,IAAP,gDAAC,YAAYd,MAAb,CARnB,CASE;IACA;IAVF;IAWE,GAAG,EAAEV,SAXP;IAYE,qBAAqB,EAAE,GAZzB;IAaE,YAAY,EAAET,YAbhB;IAcE,mBAAmB,EAAE,EAdvB;IAeE,QAAQ,EAAEqB;EAfZ,GADF;AAmBD,CAvEoB,CAArB;eAyEezB,Y"}

package/lib/commonjs/components/FileViewer.js

@@ -223,10 +223,15 @@ const FileViewerHeader = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     h2: true,
     color: palette.onBackgroundDark01,
-    style: styles.headerTitle
-  }, title), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    style: styles.headerTitle,
+    numberOfLines: 1
+  }, (0, _uikitUtils.truncate)(title, {
+    mode: 'mid',
+    maxLen: 18
+  })), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     caption2: true,
-    color: palette.onBackgroundDark01
+    color: palette.onBackgroundDark01,
+    numberOfLines: 1
   }, subtitle)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.barButton
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["FileViewer","headerShown","deleteMessage","headerTopInset","fileMessage","onPressDownload","onPressDelete","onClose","loading","setLoading","useState","bottom","useSafeAreaInsets","currentUser","useSendbirdChat","palette","useUIKitTheme","topInset","statusBarTranslucent","defaultHeight","useHeaderStyle","STRINGS","useLocalization","fileService","mediaService","usePlatformService","toast","useToast","alert","useAlert","basicTopInset","canDelete","isMyMessage","userId","fileType","getFileType","type","getFileExtension","url","useEffect","VideoComponent","fileViewer","useIIFE","uri","StyleSheet","absoluteFill","top","_onPressDelete","title","GROUP_CHANNEL","DIALOG_MESSAGE_DELETE_CONFIRM_TITLE","buttons","text","DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL","DIALOG_MESSAGE_DELETE_CONFIRM_OK","style","onPress","then","catch","show","TOAST","DELETE_MSG_ERROR","_onPressDownload","toMegabyte","size","DOWNLOAD_START","save","fileUrl","fileName","name","response","DOWNLOAD_OK","Logger","log","err","DOWNLOAD_ERROR","flex","backgroundColor","background700","alignItems","justifyContent","position","primary300","FILE_VIEWER","TITLE","SUBTITLE","FileViewerHeader","subtitle","left","right","styles","headerContainer","paddingLeft","paddingHorizontal","paddingRight","paddingTop","height","overlay01","barButton","onBackgroundDark01","barTitleContainer","headerTitle","FileViewerFooter","bottomInset","deleteShown","footerContainer","paddingBottom","createStyleSheet","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 { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte, useIIFE } 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 (!mediaService?.VideoComponent || fileType === 'file') {\n      onClose();\n    }\n  }, [mediaService]);\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        if (!mediaService?.VideoComponent) return null;\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.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,\n        buttons: [\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,\n          },\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_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}>\n          {title}\n        </Text>\n        <Text caption2 color={palette.onBackgroundDark01}>\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":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;AAYA;;AAEA;;;;;;AAaA,MAAMA,UAAU,GAAG,QAQN;EAAA,IARO;IAClBC,WAAW,GAAG,IADI;IAElBC,aAFkB;IAGlBC,cAHkB;IAIlBC,WAJkB;IAKlBC,eALkB;IAMlBC,aANkB;IAOlBC;EAPkB,CAQP;EACX,MAAM,CAACC,OAAD,EAAUC,UAAV,IAAwB,IAAAC,eAAA,EAAS,IAAT,CAA9B;EAEA,MAAM;IAAEC;EAAF,IAAa,IAAAC,6CAAA,GAAnB;EAEA,MAAM;IAAEC;EAAF,IAAkB,IAAAC,2BAAA,GAAxB;EACA,MAAM;IAAEC;EAAF,IAAc,IAAAC,yCAAA,GAApB;EACA,MAAM;IAAEC,QAAF;IAAYC,oBAAZ;IAAkCC;EAAlC,IAAoD,IAAAC,0CAAA,GAA1D;EACA,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC,WAAF;IAAeC;EAAf,IAAgC,IAAAC,8BAAA,GAAtC;EACA,MAAMC,KAAK,GAAG,IAAAC,oCAAA,GAAd;EACA,MAAM;IAAEC;EAAF,IAAY,IAAAC,oCAAA,GAAlB;EAEA,MAAMC,aAAa,GAAGZ,oBAAoB,GAAGD,QAAH,GAAc,CAAxD;EACA,MAAMc,SAAS,GAAG,IAAAC,uBAAA,EAAY5B,WAAZ,EAAyBS,WAAzB,aAAyBA,WAAzB,uBAAyBA,WAAW,CAAEoB,MAAtC,CAAlB;EACA,MAAMC,QAAQ,GAAG,IAAAC,uBAAA,EAAY/B,WAAW,CAACgC,IAAZ,IAAoB,IAAAC,4BAAA,EAAiBjC,WAAW,CAACkC,GAA7B,CAAhC,CAAjB;EAEA,IAAAC,gBAAA,EAAU,MAAM;IACd,IAAI,EAACf,YAAD,aAACA,YAAD,eAACA,YAAY,CAAEgB,cAAf,KAAiCN,QAAQ,KAAK,MAAlD,EAA0D;MACxD3B,OAAO;IACR;EACF,CAJD,EAIG,CAACiB,YAAD,CAJH;EAMA,MAAMiB,UAAU,GAAG,IAAAC,mBAAA,EAAQ,MAAM;IAC/B,QAAQR,QAAR;MACE,KAAK,OAAL;QAAc;UACZ,oBACE,6BAAC,iCAAD;YACE,MAAM,EAAE;cAAES,GAAG,EAAEvC,WAAW,CAACkC;YAAnB,CADV;YAEE,KAAK,EAAEM,uBAAA,CAAWC,YAFpB;YAGE,UAAU,EAAE,SAHd;YAIE,SAAS,EAAE,MAAMpC,UAAU,CAAC,KAAD;UAJ7B,EADF;QAQD;;MAED,KAAK,OAAL;MACA,KAAK,OAAL;QAAc;UACZ,IAAI,EAACe,YAAD,aAACA,YAAD,eAACA,YAAY,CAAEgB,cAAf,CAAJ,EAAmC,OAAO,IAAP;UACnC,oBACE,6BAAC,YAAD,CAAc,cAAd;YACE,MAAM,EAAE;cAAEG,GAAG,EAAEvC,WAAW,CAACkC;YAAnB,CADV;YAEE,KAAK,EAAE,CAACM,uBAAA,CAAWC,YAAZ,EAA0B;cAAEC,GAAG,EAAEhB,aAAa,GAAGX,aAAvB;cAAsCR,MAAM,EAAEQ,aAAa,GAAGR;YAA9D,CAA1B,CAFT;YAGE,UAAU,EAAE,SAHd;YAIE,MAAM,EAAE,MAAMF,UAAU,CAAC,KAAD;UAJ1B,EADF;QAQD;;MAED;QAAS;UACP,OAAO,IAAP;QACD;IA3BH;EA6BD,CA9BkB,CAAnB;;EAgCA,MAAMsC,cAAc,GAAG,MAAM;IAC3B,IAAI,CAAChB,SAAL,EAAgB;;IAEhB,IAAIzB,aAAJ,EAAmB;MACjBA,aAAa,CAACF,WAAD,CAAb;IACD,CAFD,MAEO;MACLwB,KAAK,CAAC;QACJoB,KAAK,EAAE3B,OAAO,CAAC4B,aAAR,CAAsBC,mCADzB;QAEJC,OAAO,EAAE,CACP;UACEC,IAAI,EAAE/B,OAAO,CAAC4B,aAAR,CAAsBI;QAD9B,CADO,EAIP;UACED,IAAI,EAAE/B,OAAO,CAAC4B,aAAR,CAAsBK,gCAD9B;UAEEC,KAAK,EAAE,aAFT;UAGEC,OAAO,EAAE,MAAM;YACbtD,aAAa,GACVuD,IADH,CACQ,MAAM;cACVlD,OAAO;YACR,CAHH,EAIGmD,KAJH,CAIS,MAAM;cACXhC,KAAK,CAACiC,IAAN,CAAWtC,OAAO,CAACuC,KAAR,CAAcC,gBAAzB,EAA2C,OAA3C;YACD,CANH;UAOD;QAXH,CAJO;MAFL,CAAD,CAAL;IAqBD;EACF,CA5BD;;EA8BA,MAAMC,gBAAgB,GAAG,MAAM;IAC7B,IAAIzD,eAAJ,EAAqB;MACnBA,eAAe,CAACD,WAAD,CAAf;IACD,CAFD,MAEO;MACL,IAAI,IAAA2D,sBAAA,EAAW3D,WAAW,CAAC4D,IAAvB,IAA+B,CAAnC,EAAsC;QACpCtC,KAAK,CAACiC,IAAN,CAAWtC,OAAO,CAACuC,KAAR,CAAcK,cAAzB,EAAyC,SAAzC;MACD;;MAED1C,WAAW,CACR2C,IADH,CACQ;QAAEC,OAAO,EAAE/D,WAAW,CAACkC,GAAvB;QAA4B8B,QAAQ,EAAEhE,WAAW,CAACiE,IAAlD;QAAwDnC,QAAQ,EAAE9B,WAAW,CAACgC;MAA9E,CADR,EAEGqB,IAFH,CAESa,QAAD,IAAc;QAClB5C,KAAK,CAACiC,IAAN,CAAWtC,OAAO,CAACuC,KAAR,CAAcW,WAAzB,EAAsC,SAAtC;;QACAC,kBAAA,CAAOC,GAAP,CAAW,eAAX,EAA4BH,QAA5B;MACD,CALH,EAMGZ,KANH,CAMUgB,GAAD,IAAS;QACdhD,KAAK,CAACiC,IAAN,CAAWtC,OAAO,CAACuC,KAAR,CAAce,cAAzB,EAAyC,OAAzC;;QACAH,kBAAA,CAAOC,GAAP,CAAW,mBAAX,EAAgCC,GAAhC;MACD,CATH;IAUD;EACF,CAnBD;;EAqBA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEE,IAAI,EAAE,CAAR;MAAWC,eAAe,EAAE9D,OAAO,CAAC+D;IAApC;EAAb,gBACE,6BAAC,sBAAD;IAAW,QAAQ,EAAE,eAArB;IAAsC,QAAQ;EAA9C,EADF,eAEE,6BAAC,iBAAD;IAAM,KAAK,EAAE;MAAEF,IAAI,EAAE,CAAR;MAAWG,UAAU,EAAE,QAAvB;MAAiCC,cAAc,EAAE;IAAjD;EAAb,GACGvC,UADH,EAEGjC,OAAO,iBAAI,6BAAC,0CAAD;IAAgB,KAAK,EAAE;MAAEyE,QAAQ,EAAE;IAAZ,CAAvB;IAAiD,IAAI,EAAE,EAAvD;IAA2D,KAAK,EAAElE,OAAO,CAACmE;EAA1E,EAFd,CAFF,EAMGjF,WAAW,iBACV,6BAAC,gBAAD;IACE,KAAK,EAAEoB,OAAO,CAAC8D,WAAR,CAAoBC,KAApB,CAA0BhF,WAA1B,CADT;IAEE,QAAQ,EAAEiB,OAAO,CAAC8D,WAAR,CAAoBE,QAApB,CAA6BjF,WAA7B,CAFZ;IAGE,QAAQ,EAAED,cAAc,IAAI2B,aAH9B;IAIE,OAAO,EAAEvB;EAJX,EAPJ,eAcE,6BAAC,gBAAD;IACE,WAAW,EAAEI,MADf;IAEE,WAAW,EAAEoB,SAFf;IAGE,aAAa,EAAEgB,cAHjB;IAIE,eAAe,EAAEe;EAJnB,EAdF,CADF;AAuBD,CAzID;;AAiJA,MAAMwB,gBAAgB,GAAG,SAAyD;EAAA,IAAxD;IAAErE,QAAF;IAAYV,OAAZ;IAAqBgF,QAArB;IAA+BvC;EAA/B,CAAwD;EAChF,MAAM;IAAEjC;EAAF,IAAc,IAAAC,yCAAA,GAApB;EACA,MAAM;IAAEG;EAAF,IAAoB,IAAAC,0CAAA,GAA1B;EACA,MAAM;IAAEoE,IAAF;IAAQC;EAAR,IAAkB,IAAA7E,6CAAA,GAAxB;EAEA,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACL8E,MAAM,CAACC,eADF,EAEL;MACEC,WAAW,EAAEF,MAAM,CAACC,eAAP,CAAuBE,iBAAvB,GAA2CL,IAD1D;MAEEM,YAAY,EAAEJ,MAAM,CAACC,eAAP,CAAuBE,iBAAvB,GAA2CJ;IAF3D,CAFK,EAML;MAAEM,UAAU,EAAE9E,QAAd;MAAwB+E,MAAM,EAAE7E,aAAa,GAAGF,QAAhD;MAA0D4D,eAAe,EAAE9D,OAAO,CAACkF;IAAnF,CANK;EADT,gBAUE,6BAAC,6BAAD;IAAkB,OAAO,EAAE1F,OAA3B;IAAoC,KAAK,EAAEmF,MAAM,CAACQ;EAAlD,gBACE,6BAAC,gCAAD;IAAM,IAAI,EAAE,OAAZ;IAAqB,IAAI,EAAE,EAA3B;IAA+B,KAAK,EAAEnF,OAAO,CAACoF;EAA9C,EADF,CAVF,eAaE,6BAAC,iBAAD;IAAM,KAAK,EAAET,MAAM,CAACU;EAApB,gBACE,6BAAC,gCAAD;IAAM,EAAE,MAAR;IAAS,KAAK,EAAErF,OAAO,CAACoF,kBAAxB;IAA4C,KAAK,EAAET,MAAM,CAACW;EAA1D,GACGrD,KADH,CADF,eAIE,6BAAC,gCAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEjC,OAAO,CAACoF;EAA9B,GACGZ,QADH,CAJF,CAbF,eAqBE,6BAAC,iBAAD;IAAM,KAAK,EAAEG,MAAM,CAACQ;EAApB,EArBF,CADF;AAyBD,CA9BD;;AAsCA,MAAMI,gBAAgB,GAAG,SAA+E;EAAA,IAA9E;IAAEC,WAAF;IAAeC,WAAf;IAA4BlG,aAA5B;IAA2CD;EAA3C,CAA8E;EACtG,MAAM;IAAEU;EAAF,IAAc,IAAAC,yCAAA,GAApB;EACA,MAAM;IAAEG;EAAF,IAAoB,IAAAC,0CAAA,GAA1B;EACA,MAAM;IAAEoE,IAAF;IAAQC;EAAR,IAAkB,IAAA7E,6CAAA,GAAxB;EAEA,oBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACL8E,MAAM,CAACe,eADF,EAEL;MACEb,WAAW,EAAEF,MAAM,CAACC,eAAP,CAAuBE,iBAAvB,GAA2CL,IAD1D;MAEEM,YAAY,EAAEJ,MAAM,CAACC,eAAP,CAAuBE,iBAAvB,GAA2CJ;IAF3D,CAFK,EAML;MACEiB,aAAa,EAAEH,WADjB;MAEEP,MAAM,EAAE7E,aAAa,GAAGoF,WAF1B;MAGE1B,eAAe,EAAE9D,OAAO,CAACkF;IAH3B,CANK;EADT,gBAcE,6BAAC,6BAAD;IAAkB,OAAO,EAAE5F,eAA3B;IAA4C,KAAK,EAAEqF,MAAM,CAACQ;EAA1D,gBACE,6BAAC,gCAAD;IAAM,IAAI,EAAE,UAAZ;IAAwB,IAAI,EAAE,EAA9B;IAAkC,KAAK,EAAEnF,OAAO,CAACoF;EAAjD,EADF,CAdF,eAiBE,6BAAC,iBAAD;IAAM,KAAK,EAAET,MAAM,CAACU;EAApB,EAjBF,eAkBE,6BAAC,6BAAD;IAAkB,OAAO,EAAE9F,aAA3B;IAA0C,KAAK,EAAEoF,MAAM,CAACQ,SAAxD;IAAmE,QAAQ,EAAE,CAACM;EAA9E,GACGA,WAAW,iBAAI,6BAAC,gCAAD;IAAM,IAAI,EAAE,QAAZ;IAAsB,IAAI,EAAE,EAA5B;IAAgC,KAAK,EAAEzF,OAAO,CAACoF;EAA/C,EADlB,CAlBF,CADF;AAwBD,CA7BD;;AA+BA,MAAMT,MAAM,GAAG,IAAAiB,4CAAA,EAAiB;EAC9BhB,eAAe,EAAE;IACf7C,GAAG,EAAE,CADU;IAEf0C,IAAI,EAAE,CAFS;IAGfC,KAAK,EAAE,CAHQ;IAIfR,QAAQ,EAAE,UAJK;IAKf2B,aAAa,EAAE,KALA;IAMf7B,UAAU,EAAE,QANG;IAOfC,cAAc,EAAE,QAPD;IAQfa,iBAAiB,EAAE;EARJ,CADa;EAW9BK,SAAS,EAAE;IACTW,KAAK,EAAE,EADE;IAETb,MAAM,EAAE,EAFC;IAGTjB,UAAU,EAAE,QAHH;IAITC,cAAc,EAAE;EAJP,CAXmB;EAiB9BoB,iBAAiB,EAAE;IACjBxB,IAAI,EAAE,CADW;IAEjBG,UAAU,EAAE,QAFK;IAGjBC,cAAc,EAAE;EAHC,CAjBW;EAsB9BqB,WAAW,EAAE;IACXS,YAAY,EAAE;EADH,CAtBiB;EAyB9BL,eAAe,EAAE;IACfxB,QAAQ,EAAE,UADK;IAEfO,IAAI,EAAE,CAFS;IAGfC,KAAK,EAAE,CAHQ;IAIf9E,MAAM,EAAE,CAJO;IAKfiG,aAAa,EAAE,KALA;IAMf7B,UAAU,EAAE,QANG;IAOfC,cAAc,EAAE,QAPD;IAQfa,iBAAiB,EAAE;EARJ;AAzBa,CAAjB,CAAf;eAqCe7F,U"}
+{"version":3,"names":["FileViewer","headerShown","deleteMessage","headerTopInset","fileMessage","onPressDownload","onPressDelete","onClose","loading","setLoading","useState","bottom","useSafeAreaInsets","currentUser","useSendbirdChat","palette","useUIKitTheme","topInset","statusBarTranslucent","defaultHeight","useHeaderStyle","STRINGS","useLocalization","fileService","mediaService","usePlatformService","toast","useToast","alert","useAlert","basicTopInset","canDelete","isMyMessage","userId","fileType","getFileType","type","getFileExtension","url","useEffect","VideoComponent","fileViewer","useIIFE","uri","StyleSheet","absoluteFill","top","_onPressDelete","title","GROUP_CHANNEL","DIALOG_MESSAGE_DELETE_CONFIRM_TITLE","buttons","text","DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL","DIALOG_MESSAGE_DELETE_CONFIRM_OK","style","onPress","then","catch","show","TOAST","DELETE_MSG_ERROR","_onPressDownload","toMegabyte","size","DOWNLOAD_START","save","fileUrl","fileName","name","response","DOWNLOAD_OK","Logger","log","err","DOWNLOAD_ERROR","flex","backgroundColor","background700","alignItems","justifyContent","position","primary300","FILE_VIEWER","TITLE","SUBTITLE","FileViewerHeader","subtitle","left","right","styles","headerContainer","paddingLeft","paddingHorizontal","paddingRight","paddingTop","height","overlay01","barButton","onBackgroundDark01","barTitleContainer","headerTitle","truncate","mode","maxLen","FileViewerFooter","bottomInset","deleteShown","footerContainer","paddingBottom","createStyleSheet","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 (!mediaService?.VideoComponent || fileType === 'file') {\n      onClose();\n    }\n  }, [mediaService]);\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        if (!mediaService?.VideoComponent) return null;\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.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,\n        buttons: [\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,\n          },\n          {\n            text: STRINGS.GROUP_CHANNEL.DIALOG_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/lib/commonjs/components/MessageRenderer/FileMessage/ImageFileMessage.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactNative = require("react-native");
+
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
 
 var _uikitUtils = require("@sendbird/uikit-utils");
@@ -15,6 +17,32 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const useRetry = function (hasError) {
+  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  if (_reactNative.Platform.OS === 'android') return '';
+  const forceUpdate = (0, _uikitUtils.useForceUpdate)();
+  const retryCountRef = (0, _react.useRef)(1);
+  const retryTimeoutRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (hasError) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            forceUpdate();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [hasError]);
+  return retryCountRef.current;
+};
+
 const ImageFileMessage = _ref => {
   let {
     message
@@ -27,25 +55,25 @@ const ImageFileMessage = _ref => {
   const style = [styles.image, {
     backgroundColor: colors.onBackground04
   }];
-
-  if (imageNotFound) {
-    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
-      containerStyle: style,
-      icon: 'thumbnail-none',
-      size: 48,
-      color: colors.onBackground02
-    });
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
+  const key = useRetry(imageNotFound);
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: style
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
+    key: key,
     source: {
       uri: fileUrl
     },
-    style: style,
+    style: [_reactNative.StyleSheet.absoluteFill, imageNotFound && styles.hide],
     resizeMode: 'cover',
     resizeMethod: 'resize',
-    onError: () => setImageNotFound(true)
-  });
+    onError: () => setImageNotFound(true),
+    onLoad: () => setImageNotFound(false)
+  }), imageNotFound && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    containerStyle: _reactNative.StyleSheet.absoluteFill,
+    icon: 'thumbnail-none',
+    size: 48,
+    color: colors.onBackground02
+  }));
 };
 
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
@@ -53,7 +81,11 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
     width: 240,
     maxWidth: 240,
     height: 160,
-    borderRadius: 16
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  hide: {
+    display: 'none'
   }
 });
 var _default = ImageFileMessage;

package/lib/commonjs/components/MessageRenderer/FileMessage/ImageFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["ImageFileMessage","message","colors","useUIKitTheme","imageNotFound","setImageNotFound","useState","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","onBackground02","uri","createStyleSheet","width","maxWidth","height","borderRadius"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst ImageFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  if (imageNotFound) {\n    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;\n  }\n\n  return (\n    <Image\n      source={{ uri: fileUrl }}\n      style={style}\n      resizeMode={'cover'}\n      resizeMethod={'resize'}\n      onError={() => setImageNotFound(true)}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;AAIA,MAAMA,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAS,KAAT,CAA1C;EAEA,MAAMC,OAAO,GAAG,IAAAC,0CAAA,EAA+BP,OAA/B,CAAhB;EACA,MAAMQ,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEV,MAAM,CAACW;EAA1B,CAAf,CAAd;;EAEA,IAAIT,aAAJ,EAAmB;IACjB,oBAAO,6BAAC,gCAAD;MAAM,cAAc,EAAEK,KAAtB;MAA6B,IAAI,EAAE,gBAAnC;MAAqD,IAAI,EAAE,EAA3D;MAA+D,KAAK,EAAEP,MAAM,CAACY;IAA7E,EAAP;EACD;;EAED,oBACE,6BAAC,iCAAD;IACE,MAAM,EAAE;MAAEC,GAAG,EAAER;IAAP,CADV;IAEE,KAAK,EAAEE,KAFT;IAGE,UAAU,EAAE,OAHd;IAIE,YAAY,EAAE,QAJhB;IAKE,OAAO,EAAE,MAAMJ,gBAAgB,CAAC,IAAD;EALjC,EADF;AASD,CApBD;;AAsBA,MAAMK,MAAM,GAAG,IAAAM,4CAAA,EAAiB;EAC9BL,KAAK,EAAE;IACLM,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE;EAJT;AADuB,CAAjB,CAAf;eASepB,gB"}
+{"version":3,"names":["useRetry","hasError","retryCount","Platform","OS","forceUpdate","useForceUpdate","retryCountRef","useRef","retryTimeoutRef","useEffect","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","colors","useUIKitTheme","imageNotFound","setImageNotFound","useState","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","key","uri","StyleSheet","absoluteFill","hide","onBackground02","createStyleSheet","width","maxWidth","height","borderRadius","overflow","display"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleSheet, View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\nconst ImageFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const key = useRetry(imageNotFound);\n\n  return (\n    <View style={style}>\n      <Image\n        key={key}\n        source={{ uri: fileUrl }}\n        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setImageNotFound(true)}\n        onLoad={() => setImageNotFound(false)}\n      />\n      {imageNotFound && (\n        <Icon\n          containerStyle={StyleSheet.absoluteFill}\n          icon={'thumbnail-none'}\n          size={48}\n          color={colors.onBackground02}\n        />\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAIA,MAAMA,QAAQ,GAAG,UAACC,QAAD,EAAuC;EAAA,IAAnBC,UAAmB,uEAAN,CAAM;EACtD,IAAIC,qBAAA,CAASC,EAAT,KAAgB,SAApB,EAA+B,OAAO,EAAP;EAE/B,MAAMC,WAAW,GAAG,IAAAC,0BAAA,GAApB;EACA,MAAMC,aAAa,GAAG,IAAAC,aAAA,EAAO,CAAP,CAAtB;EACA,MAAMC,eAAe,GAAG,IAAAD,aAAA,GAAxB;EAEA,IAAAE,gBAAA,EAAU,MAAM;IACd,IAAIT,QAAJ,EAAc;MACZ,MAAMU,iBAAiB,GAAG,MAAM;QAC9B,IAAIJ,aAAa,CAACK,OAAd,GAAwBV,UAA5B,EAAwC;UACtCO,eAAe,CAACG,OAAhB,GAA0BC,UAAU,CAAC,MAAM;YACzCN,aAAa,CAACK,OAAd;YACAD,iBAAiB;YACjBN,WAAW;UACZ,CAJmC,EAIjCE,aAAa,CAACK,OAAd,GAAwB,IAJS,CAApC;QAKD;MACF,CARD;;MAUA,OAAOD,iBAAiB,EAAxB;IACD,CAZD,MAYO;MACL,OAAOG,YAAY,CAACL,eAAe,CAACG,OAAjB,CAAnB;IACD;EACF,CAhBD,EAgBG,CAACX,QAAD,CAhBH;EAkBA,OAAOM,aAAa,CAACK,OAArB;AACD,CA1BD;;AA4BA,MAAMG,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAS,KAAT,CAA1C;EAEA,MAAMC,OAAO,GAAG,IAAAC,0CAAA,EAA+BP,OAA/B,CAAhB;EACA,MAAMQ,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEV,MAAM,CAACW;EAA1B,CAAf,CAAd;EAEA,MAAMC,GAAG,GAAG7B,QAAQ,CAACmB,aAAD,CAApB;EAEA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEK;EAAb,gBACE,6BAAC,iCAAD;IACE,GAAG,EAAEK,GADP;IAEE,MAAM,EAAE;MAAEC,GAAG,EAAER;IAAP,CAFV;IAGE,KAAK,EAAE,CAACS,uBAAA,CAAWC,YAAZ,EAA0Bb,aAAa,IAAIM,MAAM,CAACQ,IAAlD,CAHT;IAIE,UAAU,EAAE,OAJd;IAKE,YAAY,EAAE,QALhB;IAME,OAAO,EAAE,MAAMb,gBAAgB,CAAC,IAAD,CANjC;IAOE,MAAM,EAAE,MAAMA,gBAAgB,CAAC,KAAD;EAPhC,EADF,EAUGD,aAAa,iBACZ,6BAAC,gCAAD;IACE,cAAc,EAAEY,uBAAA,CAAWC,YAD7B;IAEE,IAAI,EAAE,gBAFR;IAGE,IAAI,EAAE,EAHR;IAIE,KAAK,EAAEf,MAAM,CAACiB;EAJhB,EAXJ,CADF;AAqBD,CA9BD;;AAgCA,MAAMT,MAAM,GAAG,IAAAU,4CAAA,EAAiB;EAC9BT,KAAK,EAAE;IACLU,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE,EAJT;IAKLC,QAAQ,EAAE;EALL,CADuB;EAQ9BP,IAAI,EAAE;IACJQ,OAAO,EAAE;EADL;AARwB,CAAjB,CAAf;eAae1B,gB"}

package/lib/commonjs/components/MessageRenderer/FileMessage/VideoFileMessage.js

@@ -19,6 +19,50 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const useRetry = function (videoFileUrl) {
+  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  const [state, setState] = (0, _react.useState)({
+    thumbnail: null,
+    loading: true
+  });
+  const retryCountRef = (0, _react.useRef)(0);
+  const retryTimeoutRef = (0, _react.useRef)();
+  const {
+    mediaService
+  } = (0, _useContext.usePlatformService)();
+
+  const fetchThumbnail = () => {
+    return mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
+      url: videoFileUrl,
+      timeMills: 1000
+    }).then(result => {
+      setState({
+        loading: false,
+        thumbnail: (result === null || result === void 0 ? void 0 : result.path) ?? null
+      });
+    });
+  };
+
+  (0, _react.useEffect)(() => {
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+  return state;
+};
+
 const VideoFileMessage = _ref => {
   let {
     message
@@ -26,40 +70,16 @@ const VideoFileMessage = _ref => {
   const {
     colors
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
-  const {
-    mediaService
-  } = (0, _useContext.usePlatformService)();
   const fileUrl = (0, _uikitUtils.getAvailableUriFromFileMessage)(message);
   const style = [styles.image, {
     backgroundColor: colors.onBackground04
   }];
-  const [state, setState] = (0, _react.useState)({
-    thumbnail: null,
-    loading: true,
-    imageNotFound: false
-  });
-  (0, _react.useEffect)(() => {
-    mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
-      url: fileUrl,
-      timeMills: 1000
-    }).then(result => {
-      if (result !== null && result !== void 0 && result.path) {
-        setState(prev => ({ ...prev,
-          loading: false,
-          thumbnail: result.path
-        }));
-      } else {
-        throw new Error('Cannot generate thumbnail');
-      }
-    }).catch(() => {
-      setState(prev => ({ ...prev,
-        loading: false,
-        imageNotFound: true
-      }));
-    });
-  }, []);
+  const {
+    loading,
+    thumbnail
+  } = useRetry(fileUrl);
 
-  if (state.loading || state.imageNotFound) {
+  if (loading) {
     return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
       style: [style, styles.container]
     }, /*#__PURE__*/_react.default.createElement(PlayIcon, null));
@@ -69,14 +89,11 @@ const VideoFileMessage = _ref => {
     style: styles.container
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
     source: {
-      uri: state.thumbnail || fileUrl
+      uri: thumbnail || fileUrl
     },
     style: style,
     resizeMode: 'cover',
-    resizeMethod: 'resize',
-    onError: () => setState(prev => ({ ...prev,
-      imageNotFound: true
-    }))
+    resizeMethod: 'resize'
   }), /*#__PURE__*/_react.default.createElement(PlayIcon, null));
 };
 

package/lib/commonjs/components/MessageRenderer/FileMessage/VideoFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["VideoFileMessage","message","colors","useUIKitTheme","mediaService","usePlatformService","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","state","setState","useState","thumbnail","loading","imageNotFound","useEffect","getVideoThumbnail","url","timeMills","then","result","path","prev","Error","catch","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","createStyleSheet","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const { mediaService } = usePlatformService();\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const [state, setState] = useState({\n    thumbnail: null as null | string,\n    loading: true,\n    imageNotFound: false,\n  });\n\n  useEffect(() => {\n    mediaService\n      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })\n      .then((result) => {\n        if (result?.path) {\n          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));\n        } else {\n          throw new Error('Cannot generate thumbnail');\n        }\n      })\n      .catch(() => {\n        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));\n      });\n  }, []);\n\n  if (state.loading || state.imageNotFound) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image\n        source={{ uri: state.thumbnail || fileUrl }}\n        style={style}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}\n      />\n      <PlayIcon />\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["useRetry","videoFileUrl","retryCount","state","setState","useState","thumbnail","loading","retryCountRef","useRef","retryTimeoutRef","mediaService","usePlatformService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","useEffect","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","colors","useUIKitTheme","fileUrl","getAvailableUriFromFileMessage","style","styles","image","backgroundColor","onBackground04","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","createStyleSheet","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (videoFileUrl: string, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  const { mediaService } = usePlatformService();\n\n  const fetchThumbnail = () => {\n    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {\n      setState({ loading: false, thumbnail: result?.path ?? null });\n    });\n  };\n\n  useEffect(() => {\n    if (!state.thumbnail) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            fetchThumbnail();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [state.thumbnail]);\n\n  return state;\n};\n\nconst VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const { loading, thumbnail } = useRetry(fileUrl);\n\n  if (loading) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />\n      <PlayIcon />\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}

package/lib/commonjs/components/MessageRenderer/MessageIncomingSenderName.js

@@ -33,7 +33,8 @@ const MessageIncomingSenderName = _ref => {
     style: styles.sender
   }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     caption1: true,
-    color: colors.ui.message.incoming.enabled.textSenderName
+    color: colors.ui.message.incoming.enabled.textSenderName,
+    numberOfLines: 1
   }, ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.nickname) || STRINGS.LABELS.USER_NO_NAME));
 };
 

package/lib/commonjs/components/MessageRenderer/MessageIncomingSenderName.js.map

@@ -1 +1 @@
-{"version":3,"names":["MessageIncomingSenderName","message","grouping","colors","useUIKitTheme","STRINGS","useLocalization","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","createStyleSheet","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAGA;;;;AAMA,MAAMA,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,IAAIJ,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEK,MAAM,CAACC;EAApB,GACG,CAACP,OAAO,CAACQ,aAAR,MAA2BR,OAAO,CAACS,aAAR,EAA5B,kBACC,6BAAC,gCAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ,EAAP,CAAUV,OAAV,CAAkBW,QAAlB,CAA2BC,OAA3B,CAAmCC;EAAzD,GACG,oBAAAb,OAAO,CAACO,MAAR,oEAAgBO,QAAhB,KAA4BV,OAAO,CAACW,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAG,IAAAW,4CAAA,EAAiB;EAC9BV,MAAM,EAAE;IACNW,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAjB,CAAf;eAOepB,yB"}
+{"version":3,"names":["MessageIncomingSenderName","message","grouping","colors","useUIKitTheme","STRINGS","useLocalization","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","createStyleSheet","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAGA;;;;AAMA,MAAMA,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,IAAIJ,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEK,MAAM,CAACC;EAApB,GACG,CAACP,OAAO,CAACQ,aAAR,MAA2BR,OAAO,CAACS,aAAR,EAA5B,kBACC,6BAAC,gCAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ,EAAP,CAAUV,OAAV,CAAkBW,QAAlB,CAA2BC,OAA3B,CAAmCC,cAAzD;IAAyE,aAAa,EAAE;EAAxF,GACG,oBAAAb,OAAO,CAACO,MAAR,oEAAgBO,QAAhB,KAA4BV,OAAO,CAACW,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAG,IAAAW,4CAAA,EAAiB;EAC9BV,MAAM,EAAE;IACNW,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAjB,CAAf;eAOepB,yB"}

package/lib/commonjs/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js

@@ -98,6 +98,8 @@ const OpenGraphUserMessage = _ref => {
 
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   container: {
+    width: 240,
+    maxWidth: 240,
     borderRadius: 16,
     overflow: 'hidden'
   },
@@ -111,7 +113,7 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
     paddingBottom: 12
   },
   ogImageContainer: {
-    width: 240,
+    flex: 1,
     height: 136
   },
   ogImage: {

package/lib/commonjs/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["OpenGraphUserMessage","message","variant","pressed","ogMetaData","STRINGS","useLocalization","colors","select","palette","useUIKitTheme","color","ui","imageNotFound","setImageNotFound","useState","styles","container","backgroundColor","background","messageContainer","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","Linking","openURL","url","catch","ogImageContainer","dark","background500","light","background200","conditionChaining","ogImage","onBackground02","uri","defaultImage","ogContainer","background400","background100","onBackground01","ogTitle","title","description","ogDesc","createStyleSheet","borderRadius","overflow","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","width","height","marginBottom","lineHeight"],"sources":["OpenGraphUserMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Linking, TouchableOpacity, View } from 'react-native';\nimport type Sendbird from 'sendbird';\n\nimport {\n  Icon,\n  Image,\n  Text,\n  URLParsedText,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\ntype Props = UserMessageProps & {\n  ogMetaData: Sendbird.OGMetaData;\n};\nconst OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors, select, palette } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const [imageNotFound, setImageNotFound] = useState(false);\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.messageContainer}>\n        <URLParsedText body3 color={color.textMsg}>\n          {message.message}\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </URLParsedText>\n      </View>\n      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>\n        <View\n          style={[\n            styles.ogImageContainer,\n            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n          ]}\n        >\n          {conditionChaining(\n            [imageNotFound],\n            [\n              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,\n              <Image\n                source={{ uri: ogMetaData.defaultImage?.url }}\n                style={styles.ogImage}\n                resizeMode={'cover'}\n                onError={() => setImageNotFound(true)}\n              />,\n            ],\n          )}\n        </View>\n        <View\n          style={[\n            styles.ogContainer,\n            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },\n          ]}\n        >\n          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n            {ogMetaData.title}\n          </Text>\n          {Boolean(ogMetaData.description) && (\n            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n              {ogMetaData.description}\n            </Text>\n          )}\n          <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n            {ogMetaData.url}\n          </Text>\n        </View>\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    width: 240,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"version":3,"names":["OpenGraphUserMessage","message","variant","pressed","ogMetaData","STRINGS","useLocalization","colors","select","palette","useUIKitTheme","color","ui","imageNotFound","setImageNotFound","useState","styles","container","backgroundColor","background","messageContainer","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","Linking","openURL","url","catch","ogImageContainer","dark","background500","light","background200","conditionChaining","ogImage","onBackground02","uri","defaultImage","ogContainer","background400","background100","onBackground01","ogTitle","title","description","ogDesc","createStyleSheet","width","maxWidth","borderRadius","overflow","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","flex","height","marginBottom","lineHeight"],"sources":["OpenGraphUserMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Linking, TouchableOpacity, View } from 'react-native';\n\nimport type { OGMetaData } from '@sendbird/chat/message';\nimport {\n  Icon,\n  Image,\n  Text,\n  URLParsedText,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\ntype Props = UserMessageProps & {\n  ogMetaData: OGMetaData;\n};\nconst OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors, select, palette } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const [imageNotFound, setImageNotFound] = useState(false);\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.messageContainer}>\n        <URLParsedText body3 color={color.textMsg}>\n          {message.message}\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </URLParsedText>\n      </View>\n      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>\n        <View\n          style={[\n            styles.ogImageContainer,\n            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n          ]}\n        >\n          {conditionChaining(\n            [imageNotFound],\n            [\n              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,\n              <Image\n                source={{ uri: ogMetaData.defaultImage?.url }}\n                style={styles.ogImage}\n                resizeMode={'cover'}\n                onError={() => setImageNotFound(true)}\n              />,\n            ],\n          )}\n        </View>\n        <View\n          style={[\n            styles.ogContainer,\n            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },\n          ]}\n        >\n          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n            {ogMetaData.title}\n          </Text>\n          {Boolean(ogMetaData.description) && (\n            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n              {ogMetaData.description}\n            </Text>\n          )}\n          <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n            {ogMetaData.url}\n          </Text>\n        </View>\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 240,\n    maxWidth: 240,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    flex: 1,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAGA;;AAQA;;AAEA;;;;;;AAMA,MAAMA,oBAAoB,GAAG,QAAsD;EAAA;;EAAA,IAArD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC;EAA7B,CAAqD;EACjF,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC,MAAF;IAAUC,MAAV;IAAkBC;EAAlB,IAA8B,IAAAC,yCAAA,GAApC;EACA,MAAMC,KAAK,GAAGJ,MAAM,CAACK,EAAP,CAAUX,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,MAAM,CAACU,aAAD,EAAgBC,gBAAhB,IAAoC,IAAAC,eAAA,EAAS,KAAT,CAA1C;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEP,KAAK,CAACQ;IAAzB,CAAnB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,6BAAC,yCAAD;IAAe,KAAK,MAApB;IAAqB,KAAK,EAAET,KAAK,CAACU;EAAlC,GACGpB,OAAO,CAACA,OADX,EAEGqB,OAAO,CAACrB,OAAO,CAACsB,SAAT,CAAP,iBACC,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEZ,KAAK,CAACa;EAAzB,GACGnB,OAAO,CAACoB,aAAR,CAAsBC,6BADzB,CAHJ,CADF,CADF,eAWE,6BAAC,6BAAD;IAAkB,aAAa,EAAE,GAAjC;IAAsC,OAAO,EAAE,MAAMC,oBAAA,CAAQC,OAAR,CAAgBxB,UAAU,CAACyB,GAA3B,EAAgCC,KAAhC;EAArD,gBACE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLd,MAAM,CAACe,gBADF,EAEL;MAAEb,eAAe,EAAEV,MAAM,CAAC;QAAEwB,IAAI,EAAEvB,OAAO,CAACwB,aAAhB;QAA+BC,KAAK,EAAEzB,OAAO,CAAC0B;MAA9C,CAAD;IAAzB,CAFK;EADT,GAMG,IAAAC,6BAAA,EACC,CAACvB,aAAD,CADD,EAEC,cACE,6BAAC,gCAAD;IAAM,cAAc,EAAEG,MAAM,CAACqB,OAA7B;IAAsC,IAAI,EAAE,gBAA5C;IAA8D,IAAI,EAAE,EAApE;IAAwE,KAAK,EAAE9B,MAAM,CAAC+B;EAAtF,EADF,eAEE,6BAAC,iCAAD;IACE,MAAM,EAAE;MAAEC,GAAG,2BAAEnC,UAAU,CAACoC,YAAb,0DAAE,sBAAyBX;IAAhC,CADV;IAEE,KAAK,EAAEb,MAAM,CAACqB,OAFhB;IAGE,UAAU,EAAE,OAHd;IAIE,OAAO,EAAE,MAAMvB,gBAAgB,CAAC,IAAD;EAJjC,EAFF,CAFD,CANH,CADF,eAoBE,6BAAC,iBAAD;IACE,KAAK,EAAE,CACLE,MAAM,CAACyB,WADF,EAEL;MAAEvB,eAAe,EAAEV,MAAM,CAAC;QAAEwB,IAAI,EAAEvB,OAAO,CAACiC,aAAhB;QAA+BR,KAAK,EAAEzB,OAAO,CAACkC;MAA9C,CAAD;IAAzB,CAFK;EADT,gBAME,6BAAC,gCAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,KAAK,MAA7B;IAA8B,KAAK,EAAEpC,MAAM,CAACqC,cAA5C;IAA4D,KAAK,EAAE5B,MAAM,CAAC6B;EAA1E,GACGzC,UAAU,CAAC0C,KADd,CANF,EASGxB,OAAO,CAAClB,UAAU,CAAC2C,WAAZ,CAAP,iBACC,6BAAC,gCAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,QAAQ,MAAhC;IAAiC,KAAK,EAAExC,MAAM,CAACqC,cAA/C;IAA+D,KAAK,EAAE5B,MAAM,CAACgC;EAA7E,GACG5C,UAAU,CAAC2C,WADd,CAVJ,eAcE,6BAAC,gCAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,QAAQ,MAAhC;IAAiC,KAAK,EAAExC,MAAM,CAAC+B;EAA/C,GACGlC,UAAU,CAACyB,GADd,CAdF,CApBF,CAXF,CADF;AAqDD,CA1DD;;AA4DA,MAAMb,MAAM,GAAG,IAAAiC,4CAAA,EAAiB;EAC9BhC,SAAS,EAAE;IACTiC,KAAK,EAAE,GADE;IAETC,QAAQ,EAAE,GAFD;IAGTC,YAAY,EAAE,EAHL;IAITC,QAAQ,EAAE;EAJD,CADmB;EAO9BjC,gBAAgB,EAAE;IAChBkC,eAAe,EAAE,CADD;IAEhBC,iBAAiB,EAAE;EAFH,CAPY;EAW9Bd,WAAW,EAAE;IACXc,iBAAiB,EAAE,EADR;IAEXC,UAAU,EAAE,CAFD;IAGXC,aAAa,EAAE;EAHJ,CAXiB;EAgB9B1B,gBAAgB,EAAE;IAChB2B,IAAI,EAAE,CADU;IAEhBC,MAAM,EAAE;EAFQ,CAhBY;EAoB9BtB,OAAO,EAAE;IACPa,KAAK,EAAE,MADA;IAEPS,MAAM,EAAE;EAFD,CApBqB;EAwB9Bd,OAAO,EAAE;IACPe,YAAY,EAAE;EADP,CAxBqB;EA2B9BZ,MAAM,EAAE;IACNa,UAAU,EAAE,EADN;IAEND,YAAY,EAAE;EAFR;AA3BsB,CAAjB,CAAf;eAiCe5D,oB"}

package/lib/commonjs/components/MessageRenderer/index.js

@@ -131,11 +131,13 @@ const MessageRenderer = _ref => {
   })), isIncoming && /*#__PURE__*/_react.default.createElement(_MessageIncomingAvatar.default, {
     message: message,
     grouping: groupWithNext
-  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, isIncoming && /*#__PURE__*/_react.default.createElement(_MessageIncomingSenderName.default, {
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.bubbleContainer
+  }, isIncoming && /*#__PURE__*/_react.default.createElement(_MessageIncomingSenderName.default, {
     message: message,
     grouping: groupWithPrev
   }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.bubbleContainer
+    style: styles.bubbleWrapper
   }, messageComponent, isIncoming && /*#__PURE__*/_react.default.createElement(_MessageTime.default, {
     message: message,
     grouping: groupWithNext,
@@ -173,6 +175,9 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
     maxWidth: 240
   },
   bubbleContainer: {
+    flexShrink: 1
+  },
+  bubbleWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end'
   },