@sendbird/uikit-react-native 3.1.2 → 3.3.0

package/README.md

@@ -78,6 +78,7 @@ Add the following permissions to your `android/app/src/main/AndroidManifest.xml`
           package="com.your.app">
 
     <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />
     <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
@@ -123,6 +124,8 @@ const App = () => {
         notification: NotificationService,
         clipboard: ClipboardService,
         media: MediaService,
+        recorder: RecorderService,
+        player: PlayerService,
       }}
     >
       {/* ... */}
@@ -134,7 +137,7 @@ const App = () => {
 In order to implement the interfaces to your React Native app more easily, we provide various helper functions for each interface.
 
 > **NOTE**: Helper function is not required! You can implement it with native modules you're using.
-> More details about PlatformService interfaces, please see [here](https://sendbird.com/docs/uikit/v3/react-native/core-components/provider/platformserviceprovider)
+> More details about PlatformService interfaces, please see [here](https://sendbird.com/docs/chat/uikit/v3/react-native/core-components/provider/platformserviceprovider)
 
 **Using React Native CLI**
 
@@ -147,6 +150,7 @@ npm install react-native-video \
             react-native-image-picker \
             react-native-document-picker \
             react-native-create-thumbnail \
+            react-native-audio-recorder-player \
             @react-native-clipboard/clipboard \
             @react-native-camera-roll/camera-roll \
             @react-native-firebase/app \
@@ -157,34 +161,45 @@ npx pod-install
 ```
 
 ```ts
-import * as ImageResizer from '@bam.tech/react-native-image-resizer';
-import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import RNFBMessaging from '@react-native-firebase/messaging';
-import * as CreateThumbnail from 'react-native-create-thumbnail';
+import Video from 'react-native-video';
 import * as DocumentPicker from 'react-native-document-picker';
 import * as FileAccess from 'react-native-file-access';
 import * as ImagePicker from 'react-native-image-picker';
 import * as Permissions from 'react-native-permissions';
-import Video from 'react-native-video';
-
-const NativeClipboardService = createNativeClipboardService(Clipboard);
-const NativeNotificationService = createNativeNotificationService({
-  messagingModule: RNFBMessaging,
-  permissionModule: Permissions,
-});
-const NativeFileService = createNativeFileService({
-  fsModule: FileAccess,
-  permissionModule: Permissions,
-  imagePickerModule: ImagePicker,
-  mediaLibraryModule: CameraRoll,
-  documentPickerModule: DocumentPicker,
-});
-const NativeMediaService = createNativeMediaService({
-  VideoComponent: Video,
-  thumbnailModule: CreateThumbnail,
-  imageResizerModule: ImageResizer,
-});
+import * as CreateThumbnail from 'react-native-create-thumbnail';
+import * as ImageResizer from '@bam.tech/react-native-image-resizer';
+import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';
+
+const nativePlatformServices = {
+  clipboard: createNativeClipboardService(Clipboard),
+  notification: createNativeNotificationService({
+    messagingModule: RNFBMessaging,
+    permissionModule: Permissions,
+  }),
+  file: createNativeFileService({
+    imagePickerModule: ImagePicker,
+    documentPickerModule: DocumentPicker,
+    permissionModule: Permissions,
+    fsModule: FileAccess,
+    mediaLibraryModule: CameraRoll,
+  }),
+  media: createNativeMediaService({
+    VideoComponent: Video,
+    thumbnailModule: CreateThumbnail,
+    imageResizerModule: ImageResizer,
+  }),
+  player: createNativePlayerService({
+    audioRecorderModule: AudioRecorderPlayer,
+    permissionModule: Permissions,
+  }),
+  recorder: createNativeRecorderService({
+    audioRecorderModule: AudioRecorderPlayer,
+    permissionModule: Permissions,
+  }),
+};
 ```
 
 **Using Expo CLI**
@@ -204,30 +219,38 @@ expo install expo-image-picker \
 ```
 
 ```ts
-import * as ExpoAV from 'expo-av';
 import * as ExpoClipboard from 'expo-clipboard';
 import * as ExpoDocumentPicker from 'expo-document-picker';
 import * as ExpoFS from 'expo-file-system';
-import * as ExpoImageManipulator from 'expo-image-manipulator';
 import * as ExpoImagePicker from 'expo-image-picker';
 import * as ExpoMediaLibrary from 'expo-media-library';
 import * as ExpoNotifications from 'expo-notifications';
+import * as ExpoAV from 'expo-av';
 import * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import * as ExpoImageManipulator from 'expo-image-manipulator';
 
-const ExpoNotificationService = createExpoNotificationService(ExpoNotifications);
-const ExpoClipboardService = createExpoClipboardService(ExpoClipboard);
-const ExpoFileService = createExpoFileService({
-  fsModule: ExpoFS,
-  imagePickerModule: ExpoImagePicker,
-  mediaLibraryModule: ExpoMediaLibrary,
-  documentPickerModule: ExpoDocumentPicker,
-});
-const ExpoMediaService = createExpoMediaService({
-  avModule: ExpoAV,
-  thumbnailModule: ExpoVideoThumbnail,
-  imageManipulator: ExpoImageManipulator,
-  fsModule: ExpoFS,
-});
+const expoPlatformServices = {
+  clipboard: createExpoClipboardService(ExpoClipboard),
+  notification: createExpoNotificationService(ExpoNotifications),
+  file: createExpoFileService({
+    fsModule: ExpoFS,
+    imagePickerModule: ExpoImagePicker,
+    mediaLibraryModule: ExpoMediaLibrary,
+    documentPickerModule: ExpoDocumentPicker,
+  }),
+  media: createExpoMediaService({
+    avModule: ExpoAV,
+    thumbnailModule: ExpoVideoThumbnail,
+    imageManipulator: ExpoImageManipulator,
+    fsModule: ExpoFS,
+  }),
+  player: createExpoPlayerService({
+    avModule: ExpoAV,
+  }),
+  recorder: createExpoRecorderService({
+    avModule: ExpoAV,
+  }),
+};
 ```
 
 ### Local caching (required)
@@ -236,7 +259,7 @@ You can implement Local caching easily.
 
 ```shell
 npm i @react-native-async-storage/async-storage
-npx pod-isntall
+npx pod-install
 ```
 
 ```tsx
@@ -280,7 +303,7 @@ const App = () => {
 ### Integration with navigation library
 
 Now you can create a screen and integrate it with a navigation library like [`react-navigation`](https://reactnavigation.org/).
-See more details on [here](https://st.sendbird.com/docs/uikit/v3/react-native/introduction/screen-navigation)
+See more details on [here](https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/screen-navigation)
 
 The example below shows how to integrate using `react-navigation`.
 
@@ -420,6 +443,8 @@ const App = () => {
         notification: NotificationService,
         clipboard: ClipboardService,
         media: MediaService,
+        recorder: RecorderService,
+        player: PlayerService,
       }}
     >
       <Navigation />
@@ -429,4 +454,4 @@ const App = () => {
 ```
 
 > You can use sendbird sdk using `useSendbirdChat()` hook, and you can connect or disconnect using `useConnection()` hook.
-> for more details about hooks, please refer to our [docs](https://sendbird.com/docs/uikit/v3/react-native/core-components/hooks)
+> for more details about hooks, please refer to our [docs](https://sendbird.com/docs/chat/uikit/v3/react-native/core-components/hooks)

package/lib/commonjs/components/ChannelInput/EditInput.js

@@ -13,6 +13,7 @@ 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 EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, ref) {
   let {
+    style,
     text,
     onChangeText,
     messageToEdit,
@@ -62,7 +63,7 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
     editable: !inputDisabled,
     autoFocus: autoFocus,
     onChangeText: onChangeText,
-    style: styles.input,
+    style: style,
     placeholder: STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE,
     onSelectionChange: onSelectionChange
   }, mentionManager.textToMentionedComponents(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
@@ -87,16 +88,6 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
     flexDirection: 'column',
     alignItems: 'center'
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * _reactNative.Platform.select({
-      ios: 2.5,
-      default: 2
-    }),
-    borderRadius: 20
-  },
   inputWrapper: {
     flexDirection: 'row'
   },

package/lib/commonjs/components/ChannelInput/EditInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_message","_uikitReactNativeFoundation","_useContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EditInput","forwardRef","_ref","ref","text","onChangeText","messageToEdit","setMessageToEdit","onPressUpdateUserMessage","onSelectionChange","autoFocus","mentionedUsers","inputDisabled","mentionManager","sbOptions","useSendbirdChat","STRINGS","useLocalization","toast","useToast","onPressCancel","onPressSave","isUserMessage","mentionType","MentionType","USERS","mentionedUserIds","map","it","user","userId","mentionedMessageTemplate","textToMentionedMessageTemplate","uikit","groupChannel","channel","enableMention","message","catch","onFailureToUpdate","show","TOAST","UPDATE_MSG_ERROR","createElement","View","style","styles","editInputContainer","inputWrapper","TextInput","multiline","disableFullscreenUI","editable","input","placeholder","LABELS","CHANNEL_INPUT_PLACEHOLDER_ACTIVE","textToMentionedComponents","marginTop","flexDirection","Button","variant","onPress","CHANNEL_INPUT_EDIT_CANCEL","space","CHANNEL_INPUT_EDIT_OK","createStyleSheet","paddingVertical","paddingHorizontal","alignItems","flex","marginRight","minHeight","maxHeight","Platform","select","ios","borderRadius","_default","exports"],"sources":["EditInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  NativeSyntheticEvent,\n  Platform,\n  TextInput as RNTextInput,\n  TextInputSelectionChangeEventData,\n  View,\n} from 'react-native';\n\nimport { MentionType } from '@sendbird/chat/message';\nimport { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat } from '../../hooks/useContext';\nimport type { MentionedUser } from '../../types';\nimport type { ChannelInputProps } from './index';\n\ninterface EditInputProps extends ChannelInputProps {\n  text: string;\n  onChangeText: (val: string) => void;\n  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;\n  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;\n  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;\n  autoFocus: boolean;\n  mentionedUsers: MentionedUser[];\n}\n\nconst EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(\n  {\n    text,\n    onChangeText,\n    messageToEdit,\n    setMessageToEdit,\n    onPressUpdateUserMessage,\n    onSelectionChange,\n    autoFocus,\n    mentionedUsers,\n    inputDisabled,\n  },\n  ref,\n) {\n  const { mentionManager, sbOptions } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const toast = useToast();\n\n  const onPressCancel = () => {\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onPressSave = () => {\n    if (messageToEdit.isUserMessage()) {\n      const mentionType = MentionType.USERS;\n      const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);\n      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(\n        text,\n        mentionedUsers,\n        sbOptions.uikit.groupChannel.channel.enableMention,\n      );\n\n      onPressUpdateUserMessage(messageToEdit, {\n        message: text,\n        mentionType,\n        mentionedUserIds,\n        mentionedMessageTemplate,\n      }).catch(onFailureToUpdate);\n    }\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onFailureToUpdate = () => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error');\n\n  return (\n    <View style={styles.editInputContainer}>\n      <View style={styles.inputWrapper}>\n        <TextInput\n          ref={ref}\n          multiline\n          disableFullscreenUI\n          editable={!inputDisabled}\n          autoFocus={autoFocus}\n          onChangeText={onChangeText}\n          style={styles.input}\n          placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}\n          onSelectionChange={onSelectionChange}\n        >\n          {mentionManager.textToMentionedComponents(\n            text,\n            mentionedUsers,\n            sbOptions.uikit.groupChannel.channel.enableMention,\n          )}\n        </TextInput>\n      </View>\n      <View style={{ marginTop: 8, flexDirection: 'row' }}>\n        <Button variant={'text'} onPress={onPressCancel}>\n          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL}\n        </Button>\n        <View style={styles.space} />\n        <Button variant={'contained'} onPress={onPressSave}>\n          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK}\n        </Button>\n      </View>\n    </View>\n  );\n});\n\nconst styles = createStyleSheet({\n  editInputContainer: {\n    paddingVertical: 10,\n    paddingHorizontal: 16,\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  input: {\n    flex: 1,\n    marginRight: 4,\n    minHeight: 36,\n    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),\n    borderRadius: 20,\n  },\n  inputWrapper: {\n    flexDirection: 'row',\n  },\n  space: {\n    flex: 1,\n  },\n});\n\nexport default EditInput;\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_message","_uikitReactNativeFoundation","_useContext","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EditInput","forwardRef","_ref","ref","style","text","onChangeText","messageToEdit","setMessageToEdit","onPressUpdateUserMessage","onSelectionChange","autoFocus","mentionedUsers","inputDisabled","mentionManager","sbOptions","useSendbirdChat","STRINGS","useLocalization","toast","useToast","onPressCancel","onPressSave","isUserMessage","mentionType","MentionType","USERS","mentionedUserIds","map","it","user","userId","mentionedMessageTemplate","textToMentionedMessageTemplate","uikit","groupChannel","channel","enableMention","message","catch","onFailureToUpdate","show","TOAST","UPDATE_MSG_ERROR","createElement","View","styles","editInputContainer","inputWrapper","TextInput","multiline","disableFullscreenUI","editable","placeholder","LABELS","CHANNEL_INPUT_PLACEHOLDER_ACTIVE","textToMentionedComponents","marginTop","flexDirection","Button","variant","onPress","CHANNEL_INPUT_EDIT_CANCEL","space","CHANNEL_INPUT_EDIT_OK","createStyleSheet","paddingVertical","paddingHorizontal","alignItems","flex","_default","exports"],"sources":["EditInput.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { NativeSyntheticEvent, TextInput as RNTextInput, TextInputSelectionChangeEventData, View } from 'react-native';\n\nimport { MentionType } from '@sendbird/chat/message';\nimport { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat } from '../../hooks/useContext';\nimport type { MentionedUser } from '../../types';\nimport type { ChannelInputProps } from './index';\n\ninterface EditInputProps extends ChannelInputProps {\n  text: string;\n  onChangeText: (val: string) => void;\n  messageToEdit: SendbirdUserMessage | SendbirdFileMessage;\n  setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;\n  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;\n  autoFocus: boolean;\n  mentionedUsers: MentionedUser[];\n}\n\nconst EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(\n  {\n    style,\n    text,\n    onChangeText,\n    messageToEdit,\n    setMessageToEdit,\n    onPressUpdateUserMessage,\n    onSelectionChange,\n    autoFocus,\n    mentionedUsers,\n    inputDisabled,\n  },\n  ref,\n) {\n  const { mentionManager, sbOptions } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const toast = useToast();\n\n  const onPressCancel = () => {\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onPressSave = () => {\n    if (messageToEdit.isUserMessage()) {\n      const mentionType = MentionType.USERS;\n      const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);\n      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(\n        text,\n        mentionedUsers,\n        sbOptions.uikit.groupChannel.channel.enableMention,\n      );\n\n      onPressUpdateUserMessage(messageToEdit, {\n        message: text,\n        mentionType,\n        mentionedUserIds,\n        mentionedMessageTemplate,\n      }).catch(onFailureToUpdate);\n    }\n    setMessageToEdit();\n    onChangeText('');\n  };\n\n  const onFailureToUpdate = () => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error');\n\n  return (\n    <View style={styles.editInputContainer}>\n      <View style={styles.inputWrapper}>\n        <TextInput\n          ref={ref}\n          multiline\n          disableFullscreenUI\n          editable={!inputDisabled}\n          autoFocus={autoFocus}\n          onChangeText={onChangeText}\n          style={style}\n          placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}\n          onSelectionChange={onSelectionChange}\n        >\n          {mentionManager.textToMentionedComponents(\n            text,\n            mentionedUsers,\n            sbOptions.uikit.groupChannel.channel.enableMention,\n          )}\n        </TextInput>\n      </View>\n      <View style={{ marginTop: 8, flexDirection: 'row' }}>\n        <Button variant={'text'} onPress={onPressCancel}>\n          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL}\n        </Button>\n        <View style={styles.space} />\n        <Button variant={'contained'} onPress={onPressSave}>\n          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK}\n        </Button>\n      </View>\n    </View>\n  );\n});\n\nconst styles = createStyleSheet({\n  editInputContainer: {\n    paddingVertical: 10,\n    paddingHorizontal: 16,\n    flexDirection: 'column',\n    alignItems: 'center',\n  },\n  inputWrapper: {\n    flexDirection: 'row',\n  },\n  space: {\n    flex: 1,\n  },\n});\n\nexport default EditInput;\n"],"mappings":"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"}

package/lib/commonjs/components/ChannelInput/MessageToReplyPreview.js

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageToReplyPreview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+var _uikitUtils = require("@sendbird/uikit-utils");
+var _useContext = require("../../hooks/useContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const MessageToReplyPreview = _ref => {
+  let {
+    messageToReply,
+    setMessageToReply
+  } = _ref;
+  const {
+    colors,
+    select,
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const {
+    mediaService
+  } = (0, _useContext.usePlatformService)();
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const getFileIconAsImage = url => {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.ImageWithPlaceholder, {
+      source: {
+        uri: url
+      },
+      style: styles.previewImage
+    });
+  };
+  const getFileIconAsVideoThumbnail = url => {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.VideoThumbnail, {
+      style: styles.previewImage,
+      iconSize: 0,
+      source: url,
+      fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
+        url: uri,
+        timeMills: 1000
+      })
+    });
+  };
+  const getFileIconAsSymbol = icon => {
+    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+      icon: icon,
+      size: 20,
+      color: colors.onBackground02,
+      containerStyle: [styles.fileIcon, {
+        backgroundColor: select({
+          light: palette.background100,
+          dark: palette.background500
+        })
+      }]
+    });
+  };
+  const getFileIcon = messageToReply => {
+    if (messageToReply !== null && messageToReply !== void 0 && messageToReply.isFileMessage()) {
+      const messageType = (0, _uikitUtils.getMessageType)(messageToReply);
+      switch (messageType) {
+        case 'file.image':
+          return getFileIconAsImage((0, _uikitUtils.getThumbnailUriFromFileMessage)(messageToReply));
+        case 'file.video':
+          return getFileIconAsVideoThumbnail((0, _uikitUtils.getThumbnailUriFromFileMessage)(messageToReply));
+        case 'file.voice':
+          return null;
+        default:
+          return getFileIconAsSymbol((0, _uikitUtils.getFileIconFromMessageType)(messageType));
+      }
+    }
+    return null;
+  };
+  if (!messageToReply) return null;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.messageToReplyContainer, {
+      borderColor: colors.onBackground04
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      flexDirection: 'row'
+    }
+  }, getFileIcon(messageToReply), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flex: 1,
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    numberOfLines: 1,
+    style: {
+      fontSize: 13,
+      fontWeight: '900',
+      marginBottom: 4
+    }
+  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+    numberOfLines: 1,
+    style: {
+      fontSize: 13,
+      color: colors.onBackground03
+    }
+  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => setMessageToReply === null || setMessageToReply === void 0 ? void 0 : setMessageToReply(undefined)
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'close',
+    size: 24,
+    color: colors.onBackground01,
+    containerStyle: styles.closeIcon
+  })));
+};
+exports.MessageToReplyPreview = MessageToReplyPreview;
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  previewImage: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    marginTop: 2,
+    marginRight: 10,
+    overflow: 'hidden'
+  },
+  messageToReplyContainer: {
+    flexDirection: 'row',
+    paddingLeft: 18,
+    paddingRight: 16,
+    paddingTop: 10,
+    paddingBottom: 8,
+    alignItems: 'center',
+    borderTopWidth: 1
+  },
+  fileIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    marginRight: 10,
+    marginTop: 2
+  },
+  closeIcon: {
+    marginLeft: 4,
+    padding: 4
+  }
+});
+//# sourceMappingURL=MessageToReplyPreview.js.map

package/lib/commonjs/components/ChannelInput/MessageToReplyPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitReactNativeFoundation","_uikitUtils","_useContext","obj","__esModule","default","MessageToReplyPreview","_ref","messageToReply","setMessageToReply","colors","select","palette","useUIKitTheme","mediaService","usePlatformService","STRINGS","useLocalization","getFileIconAsImage","url","createElement","ImageWithPlaceholder","source","uri","style","styles","previewImage","getFileIconAsVideoThumbnail","VideoThumbnail","iconSize","fetchThumbnailFromVideoSource","getVideoThumbnail","timeMills","getFileIconAsSymbol","icon","Icon","size","color","onBackground02","containerStyle","fileIcon","backgroundColor","light","background100","dark","background500","getFileIcon","isFileMessage","messageType","getMessageType","getThumbnailUriFromFileMessage","getFileIconFromMessageType","View","messageToReplyContainer","borderColor","onBackground04","flex","flexDirection","Text","numberOfLines","fontSize","fontWeight","marginBottom","LABELS","CHANNEL_INPUT_REPLY_PREVIEW_TITLE","sender","onBackground03","CHANNEL_INPUT_REPLY_PREVIEW_BODY","TouchableOpacity","onPress","undefined","onBackground01","closeIcon","exports","createStyleSheet","width","height","borderRadius","marginTop","marginRight","overflow","paddingLeft","paddingRight","paddingTop","paddingBottom","alignItems","borderTopWidth","marginLeft","padding"],"sources":["MessageToReplyPreview.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport {\n  Icon,\n  ImageWithPlaceholder,\n  Text,\n  VideoThumbnail,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport {\n  FileIcon,\n  SendbirdBaseMessage,\n  SendbirdFileMessage,\n  SendbirdUserMessage,\n  getFileIconFromMessageType,\n  getMessageType,\n  getThumbnailUriFromFileMessage,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, usePlatformService } from '../../hooks/useContext';\n\nexport type MessageToReplyPreviewProps = {\n  messageToReply?: SendbirdFileMessage | SendbirdUserMessage;\n  setMessageToReply?: (message?: undefined | SendbirdFileMessage | SendbirdUserMessage) => void;\n};\n\nexport const MessageToReplyPreview = ({ messageToReply, setMessageToReply }: MessageToReplyPreviewProps) => {\n  const { colors, select, palette } = useUIKitTheme();\n  const { mediaService } = usePlatformService();\n  const { STRINGS } = useLocalization();\n\n  const getFileIconAsImage = (url: string) => {\n    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;\n  };\n\n  const getFileIconAsVideoThumbnail = (url: string) => {\n    return (\n      <VideoThumbnail\n        style={styles.previewImage}\n        iconSize={0}\n        source={url}\n        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}\n      />\n    );\n  };\n\n  const getFileIconAsSymbol = (icon: FileIcon) => {\n    return (\n      <Icon\n        icon={icon}\n        size={20}\n        color={colors.onBackground02}\n        containerStyle={[\n          styles.fileIcon,\n          {\n            backgroundColor: select({ light: palette.background100, dark: palette.background500 }),\n          },\n        ]}\n      />\n    );\n  };\n\n  const getFileIcon = (messageToReply: SendbirdBaseMessage) => {\n    if (messageToReply?.isFileMessage()) {\n      const messageType = getMessageType(messageToReply);\n      switch (messageType) {\n        case 'file.image':\n          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));\n        case 'file.video':\n          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));\n        case 'file.voice':\n          return null;\n        default:\n          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));\n      }\n    }\n    return null;\n  };\n\n  if (!messageToReply) return null;\n\n  return (\n    <View style={[styles.messageToReplyContainer, { borderColor: colors.onBackground04 }]}>\n      <View style={{ flex: 1, flexDirection: 'row' }}>\n        {getFileIcon(messageToReply)}\n        <View style={{ flex: 1, flexDirection: 'column' }}>\n          <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>\n            {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}\n          </Text>\n          <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>\n            {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}\n          </Text>\n        </View>\n      </View>\n      <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>\n        <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.closeIcon} />\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  previewImage: {\n    width: 36,\n    height: 36,\n    borderRadius: 10,\n    marginTop: 2,\n    marginRight: 10,\n    overflow: 'hidden',\n  },\n  messageToReplyContainer: {\n    flexDirection: 'row',\n    paddingLeft: 18,\n    paddingRight: 16,\n    paddingTop: 10,\n    paddingBottom: 8,\n    alignItems: 'center',\n    borderTopWidth: 1,\n  },\n  fileIcon: {\n    width: 36,\n    height: 36,\n    borderRadius: 10,\n    marginRight: 10,\n    marginTop: 2,\n  },\n  closeIcon: {\n    marginLeft: 4,\n    padding: 4,\n  },\n});\n"],"mappings":"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"}