@sendbird/uikit-react-native 3.1.2 → 3.3.0

package/src/components/ChannelInput/MessageToReplyPreview.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import {
+  Icon,
+  ImageWithPlaceholder,
+  Text,
+  VideoThumbnail,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  FileIcon,
+  SendbirdBaseMessage,
+  SendbirdFileMessage,
+  SendbirdUserMessage,
+  getFileIconFromMessageType,
+  getMessageType,
+  getThumbnailUriFromFileMessage,
+} from '@sendbird/uikit-utils';
+
+import { useLocalization, usePlatformService } from '../../hooks/useContext';
+
+export type MessageToReplyPreviewProps = {
+  messageToReply?: SendbirdFileMessage | SendbirdUserMessage;
+  setMessageToReply?: (message?: undefined | SendbirdFileMessage | SendbirdUserMessage) => void;
+};
+
+export const MessageToReplyPreview = ({ messageToReply, setMessageToReply }: MessageToReplyPreviewProps) => {
+  const { colors, select, palette } = useUIKitTheme();
+  const { mediaService } = usePlatformService();
+  const { STRINGS } = useLocalization();
+
+  const getFileIconAsImage = (url: string) => {
+    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;
+  };
+
+  const getFileIconAsVideoThumbnail = (url: string) => {
+    return (
+      <VideoThumbnail
+        style={styles.previewImage}
+        iconSize={0}
+        source={url}
+        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+      />
+    );
+  };
+
+  const getFileIconAsSymbol = (icon: FileIcon) => {
+    return (
+      <Icon
+        icon={icon}
+        size={20}
+        color={colors.onBackground02}
+        containerStyle={[
+          styles.fileIcon,
+          {
+            backgroundColor: select({ light: palette.background100, dark: palette.background500 }),
+          },
+        ]}
+      />
+    );
+  };
+
+  const getFileIcon = (messageToReply: SendbirdBaseMessage) => {
+    if (messageToReply?.isFileMessage()) {
+      const messageType = getMessageType(messageToReply);
+      switch (messageType) {
+        case 'file.image':
+          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));
+        case 'file.video':
+          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));
+        case 'file.voice':
+          return null;
+        default:
+          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
+      }
+    }
+    return null;
+  };
+
+  if (!messageToReply) return null;
+
+  return (
+    <View style={[styles.messageToReplyContainer, { borderColor: colors.onBackground04 }]}>
+      <View style={{ flex: 1, flexDirection: 'row' }}>
+        {getFileIcon(messageToReply)}
+        <View style={{ flex: 1, flexDirection: 'column' }}>
+          <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>
+            {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}
+          </Text>
+          <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>
+            {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}
+          </Text>
+        </View>
+      </View>
+      <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>
+        <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.closeIcon} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = 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,
+  },
+});

package/src/components/ChannelInput/SendInput.tsx

@@ -1,42 +1,28 @@
 import React, { forwardRef } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput as RNTextInput,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
   View,
 } from 'react-native';
 
-import { MentionType } from '@sendbird/chat/message';
-import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
+import { MentionType, MessageMetaArray } from '@sendbird/chat/message';
 import {
   Icon,
-  ImageWithPlaceholder,
-  Text,
+  Modal,
   TextInput,
-  VideoThumbnail,
   createStyleSheet,
   useAlert,
   useBottomSheet,
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import {
-  FileIcon,
-  Logger,
-  SendbirdBaseMessage,
-  SendbirdChannel,
-  getFileIconFromMessageType,
-  getMessageType,
-  getThumbnailUriFromFileMessage,
-  isImage,
-  shouldCompressImage,
-  useIIFE,
-} from '@sendbird/uikit-utils';
+import { Logger, useDeferredModalState, useIIFE } from '@sendbird/uikit-utils';
 
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY, VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY } from '../../constants';
+import { useChannelInputItems } from '../../hooks/useChannelInputItems';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
-import SBUError from '../../libs/SBUError';
 import SBUUtils from '../../libs/SBUUtils';
 import type { FileType } from '../../platform/types';
 import type { MentionedUser } from '../../types';
@@ -51,6 +37,9 @@ interface SendInputProps extends ChannelInputProps {
 
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    style,
+    VoiceMessageInput,
+    MessageToReplyPreview,
     AttachmentsButton,
     onPressSendUserMessage,
     onPressSendFileMessage,
@@ -67,12 +56,18 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   },
   ref,
 ) {
+  const { playerService, recorderService } = usePlatformService();
   const { mentionManager, sbOptions } = useSendbirdChat();
-  const { select, colors, palette } = useUIKitTheme();
   const { STRINGS } = useLocalization();
   const { openSheet } = useBottomSheet();
   const toast = useToast();
-  const { mediaService } = usePlatformService();
+
+  const {
+    onClose,
+    onDismiss,
+    visible: voiceMessageInputVisible,
+    setVisible: setVoiceMessageInputVisible,
+  } = useDeferredModalState();
 
   const messageReplyParams = useIIFE(() => {
     const { groupChannel } = sbOptions.uikit;
@@ -122,8 +117,35 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     setMessageToReply?.();
   };
 
+  const sendVoiceMessage = (file: FileType, durationMills: number) => {
+    if (inputMuted) {
+      toast.show(STRINGS.TOAST.USER_MUTED_ERROR, 'error');
+      Logger.error(STRINGS.TOAST.USER_MUTED_ERROR);
+    } else if (inputFrozen) {
+      toast.show(STRINGS.TOAST.CHANNEL_FROZEN_ERROR, 'error');
+      Logger.error(STRINGS.TOAST.CHANNEL_FROZEN_ERROR);
+    } else {
+      onPressSendFileMessage({
+        file,
+        metaArrays: [
+          new MessageMetaArray({
+            key: VOICE_MESSAGE_META_ARRAY_DURATION_KEY,
+            value: [String(durationMills)],
+          }),
+          new MessageMetaArray({
+            key: VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY,
+            value: [`voice/${recorderService.options.extension}`],
+          }),
+        ],
+        ...messageReplyParams,
+      }).catch(onFailureToSend);
+    }
+
+    onChangeText('');
+    setMessageToReply?.();
+  };
+
   const sheetItems = useChannelInputItems(channel, sendFileMessage);
-  const onPressAttachment = () => openSheet({ sheetItems });
 
   const getPlaceholder = () => {
     if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
@@ -134,90 +156,16 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
   };
 
-  const getFileIconAsImage = (url: string) => {
-    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;
-  };
-
-  const getFileIconAsVideoThumbnail = (url: string) => {
-    return (
-      <VideoThumbnail
-        style={styles.previewImage}
-        iconSize={0}
-        source={url}
-        fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
-      />
-    );
-  };
-
-  const getFileIconAsSymbol = (icon: FileIcon) => {
-    return (
-      <Icon
-        icon={icon}
-        size={20}
-        color={colors.onBackground02}
-        containerStyle={{
-          backgroundColor: select({
-            light: palette.background100,
-            dark: palette.background500,
-          }),
-          width: 36,
-          height: 36,
-          borderRadius: 10,
-          marginRight: 10,
-          marginTop: 2,
-        }}
-      />
-    );
-  };
-
-  const getFileIcon = (messageToReply: SendbirdBaseMessage) => {
-    if (messageToReply?.isFileMessage()) {
-      const messageType = getMessageType(messageToReply);
-      switch (messageType) {
-        case 'file.image':
-          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));
-        case 'file.video':
-          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));
-        default:
-          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
-      }
-    }
-    return null;
-  };
+  const voiceMessageEnabled = channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.enableVoiceMessage;
+  const sendButtonVisible = Boolean(text.trim());
 
   return (
     <View>
-      {messageToReply && (
-        <View
-          style={{
-            flexDirection: 'row',
-            paddingLeft: 18,
-            paddingRight: 16,
-            paddingTop: 10,
-            paddingBottom: 8,
-            alignItems: 'center',
-            borderTopWidth: 1,
-            borderColor: colors.onBackground04,
-          }}
-        >
-          <View style={{ flex: 1, flexDirection: 'row' }}>
-            {getFileIcon(messageToReply)}
-            <View style={{ flex: 1, flexDirection: 'column' }}>
-              <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>
-                {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}
-              </Text>
-              <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>
-                {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}
-              </Text>
-            </View>
-          </View>
-          <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>
-            <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.iconSend} />
-          </TouchableOpacity>
-        </View>
+      {MessageToReplyPreview && (
+        <MessageToReplyPreview messageToReply={messageToReply} setMessageToReply={setMessageToReply} />
       )}
       <View style={styles.sendInputContainer}>
-        {AttachmentsButton && <AttachmentsButton onPress={onPressAttachment} disabled={inputDisabled} />}
+        {AttachmentsButton && <AttachmentsButton onPress={() => openSheet({ sheetItems })} disabled={inputDisabled} />}
         <TextInput
           ref={ref}
           multiline
@@ -225,7 +173,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           onSelectionChange={onSelectionChange}
           editable={!inputDisabled}
           onChangeText={onChangeText}
-          style={styles.input}
+          style={style}
           placeholder={getPlaceholder()}
         >
           {mentionManager.textToMentionedComponents(
@@ -235,229 +183,98 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           )}
         </TextInput>
 
-        {Boolean(text.trim()) && (
-          <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
-            <Icon
-              color={
-                inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
-              }
-              icon={'send'}
-              size={24}
-              containerStyle={styles.iconSend}
-            />
-          </TouchableOpacity>
+        {voiceMessageEnabled && (
+          <VoiceMessageButton
+            visible={!sendButtonVisible}
+            disabled={inputDisabled}
+            onPress={() => setVoiceMessageInputVisible(true)}
+          />
+        )}
+        <UserMessageSendButton visible={sendButtonVisible} disabled={inputDisabled} onPress={sendUserMessage} />
+        {voiceMessageEnabled && VoiceMessageInput && (
+          <Modal
+            disableBackgroundClose
+            onClose={onClose}
+            onDismiss={() => {
+              onDismiss();
+              Promise.allSettled([playerService.reset(), recorderService.reset()]);
+            }}
+            backgroundStyle={{ justifyContent: 'flex-end' }}
+            visible={voiceMessageInputVisible}
+            type={'slide-no-gesture'}
+          >
+            <VoiceMessageInput onClose={onClose} onSend={({ file, duration }) => sendVoiceMessage(file, duration)} />
+          </Modal>
         )}
       </View>
     </View>
   );
 });
 
-const useChannelInputItems = (channel: SendbirdChannel, sendFileMessage: (file: FileType) => void) => {
-  const { sbOptions, imageCompressionConfig } = useSendbirdChat();
+type InputButtonProps = { visible: boolean; disabled: boolean; onPress: () => void };
+const VoiceMessageButton = ({ visible, disabled, onPress }: InputButtonProps) => {
   const { STRINGS } = useLocalization();
-  const { fileService, mediaService } = usePlatformService();
   const { alert } = useAlert();
-  const toast = useToast();
-
-  const sheetItems: BottomSheetItem['sheetItems'] = [];
-  const input = useIIFE(() => {
-    switch (true) {
-      case channel.isOpenChannel():
-        return sbOptions.uikit.openChannel.channel.input;
-      case channel.isGroupChannel():
-        return sbOptions.uikit.groupChannel.channel.input;
-      default:
-        return {
-          enableDocument: true,
-          camera: { enablePhoto: true, enableVideo: true },
-          gallery: { enablePhoto: true, enableVideo: true },
-        };
+  const { playerService, recorderService } = usePlatformService();
+  const { colors } = useUIKitTheme();
+  if (!visible) return null;
+
+  const onPressWithPermissionCheck = async () => {
+    const recorderGranted = await recorderService.requestPermission();
+    if (!recorderGranted) {
+      alert({
+        title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+        message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+          STRINGS.LABELS.PERMISSION_MICROPHONE,
+          STRINGS.LABELS.PERMISSION_APP_NAME,
+        ),
+        buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+      });
+      Logger.error('Failed to request permission for recorder');
+      return;
     }
-  });
 
-  if (input.camera.enablePhoto) {
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO,
-      icon: 'camera',
-      onPress: async () => {
-        const mediaFile = await fileService.openCamera({
-          mediaType: 'photo',
-          onOpenFailure: (error) => {
-            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-              alert({
-                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
-                  STRINGS.LABELS.PERMISSION_CAMERA,
-                  STRINGS.LABELS.PERMISSION_APP_NAME,
-                ),
-                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
-              });
-            } else {
-              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
-            }
-          },
-        });
-
-        if (mediaFile) {
-          // Image compression
-          if (
-            isImage(mediaFile.uri, mediaFile.type) &&
-            shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)
-          ) {
-            await SBUUtils.safeRun(async () => {
-              const compressed = await mediaService.compressImage({
-                uri: mediaFile.uri,
-                maxWidth: imageCompressionConfig.width,
-                maxHeight: imageCompressionConfig.height,
-                compressionRate: imageCompressionConfig.compressionRate,
-              });
-
-              if (compressed) {
-                mediaFile.uri = compressed.uri;
-                mediaFile.size = compressed.size;
-              }
-            });
-          }
-
-          sendFileMessage(mediaFile);
-        }
-      },
-    });
-  }
-
-  if (input.camera.enableVideo) {
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO,
-      icon: 'camera',
-      onPress: async () => {
-        const mediaFile = await fileService.openCamera({
-          mediaType: 'video',
-          onOpenFailure: (error) => {
-            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-              alert({
-                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
-                  STRINGS.LABELS.PERMISSION_CAMERA,
-                  STRINGS.LABELS.PERMISSION_APP_NAME,
-                ),
-                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
-              });
-            } else {
-              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
-            }
-          },
-        });
-
-        if (mediaFile) {
-          sendFileMessage(mediaFile);
-        }
-      },
-    });
-  }
-
-  if (input.gallery.enablePhoto || input.gallery.enableVideo) {
-    const mediaType = (() => {
-      switch (true) {
-        case input.gallery.enablePhoto && input.gallery.enableVideo:
-          return 'all';
-        case input.gallery.enablePhoto && !input.gallery.enableVideo:
-          return 'photo';
-        case !input.gallery.enablePhoto && input.gallery.enableVideo:
-          return 'video';
-        default:
-          return 'all';
-      }
-    })();
-
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
-      icon: 'photo',
-      onPress: async () => {
-        const mediaFiles = await fileService.openMediaLibrary({
-          selectionLimit: 1,
-          mediaType,
-          onOpenFailure: (error) => {
-            if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
-              alert({
-                title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
-                message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
-                  STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
-                  STRINGS.LABELS.PERMISSION_APP_NAME,
-                ),
-                buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
-              });
-            } else {
-              toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
-            }
-          },
-        });
-
-        if (mediaFiles && mediaFiles[0]) {
-          const mediaFile = mediaFiles[0];
-
-          // Image compression
-          if (
-            isImage(mediaFile.uri, mediaFile.type) &&
-            shouldCompressImage(mediaFile.type, sbOptions.chat.imageCompressionEnabled)
-          ) {
-            await SBUUtils.safeRun(async () => {
-              const compressed = await mediaService.compressImage({
-                uri: mediaFile.uri,
-                maxWidth: imageCompressionConfig.width,
-                maxHeight: imageCompressionConfig.height,
-                compressionRate: imageCompressionConfig.compressionRate,
-              });
-
-              if (compressed) {
-                mediaFile.uri = compressed.uri;
-                mediaFile.size = compressed.size;
-              }
-            });
-          }
-
-          sendFileMessage(mediaFile);
-        }
-      },
-    });
-  }
-
-  if (input.enableDocument) {
-    sheetItems.push({
-      title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
-      icon: 'document',
-      onPress: async () => {
-        const documentFile = await fileService.openDocument({
-          onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
-        });
-
-        if (documentFile) {
-          // Image compression
-          if (
-            isImage(documentFile.uri, documentFile.type) &&
-            shouldCompressImage(documentFile.type, sbOptions.chat.imageCompressionEnabled)
-          ) {
-            await SBUUtils.safeRun(async () => {
-              const compressed = await mediaService.compressImage({
-                uri: documentFile.uri,
-                maxWidth: imageCompressionConfig.width,
-                maxHeight: imageCompressionConfig.height,
-                compressionRate: imageCompressionConfig.compressionRate,
-              });
-
-              if (compressed) {
-                documentFile.uri = compressed.uri;
-                documentFile.size = compressed.size;
-              }
-            });
-          }
+    const playerGranted = await playerService.requestPermission();
+    if (!playerGranted) {
+      alert({
+        title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+        message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+          STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+          STRINGS.LABELS.PERMISSION_APP_NAME,
+        ),
+        buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+      });
+      Logger.error('Failed to request permission for player');
+      return;
+    }
 
-          sendFileMessage(documentFile);
-        }
-      },
-    });
-  }
+    onPress();
+  };
 
-  return sheetItems;
+  return (
+    <TouchableOpacity onPress={onPressWithPermissionCheck} disabled={disabled}>
+      <Icon
+        color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+        icon={'audio-on'}
+        size={24}
+        containerStyle={styles.sendIcon}
+      />
+    </TouchableOpacity>
+  );
+};
+const UserMessageSendButton = ({ visible, disabled, onPress }: InputButtonProps) => {
+  const { colors } = useUIKitTheme();
+  if (!visible) return null;
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled}>
+      <Icon
+        color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+        icon={'send'}
+        size={24}
+        containerStyle={styles.sendIcon}
+      />
+    </TouchableOpacity>
+  );
 };
 
 const styles = createStyleSheet({
@@ -467,25 +284,10 @@ const styles = createStyleSheet({
     alignItems: 'center',
     flexDirection: 'row',
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
-    borderRadius: 20,
-  },
-  iconSend: {
+  sendIcon: {
     marginLeft: 4,
     padding: 4,
   },
-  previewImage: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    marginTop: 2,
-    marginRight: 10,
-    overflow: 'hidden',
-  },
 });
 
 export default SendInput;