@sendbird/uikit-react-native 2.5.0 → 3.0.0-rc.0

package/README.md

@@ -46,6 +46,8 @@ UIKit for React-Native can be installed through either `yarn` or `npm`
 
 **Install dependencies**
 
+> Note: If you are using `react-native` version `0.72` or higher, you don't need to install `@sendbird/react-native-scrollview-enhancer`.
+
 ```sh
 npm install @sendbird/uikit-react-native \
             @sendbird/chat \
@@ -113,6 +115,9 @@ const App = () => {
   return (
     <SendbirdUIKitContainer
       appId={'APP_ID'}
+      chatOptions={{
+        localCacheStorage: AsyncStorage,
+      }}
       platformServices={{
         file: FileService,
         notification: NotificationService,
@@ -225,7 +230,7 @@ const ExpoMediaService = createExpoMediaService({
 });
 ```
 
-### Local caching (optional)
+### Local caching (required)
 
 You can implement Local caching easily.
 

package/lib/commonjs/components/{MessageRenderer/MessageTime.js → ChannelInput/AttachmentsButton.js}

@@ -7,28 +7,31 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
-var _useContext = require("../../hooks/useContext");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const MessageTime = _ref => {
+const AttachmentsButton = _ref => {
   let {
-    message,
-    grouping,
-    style
+    onPress,
+    disabled
   } = _ref;
-  const {
-    STRINGS
-  } = (0, _useContext.useLocalization)();
   const {
     colors
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
-  if (grouping) return null;
-  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: style
-  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
-    caption4: true,
-    color: colors.ui.groupChannelMessage.incoming.enabled.textTime
-  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)));
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    color: disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
+    icon: 'add',
+    size: 24,
+    containerStyle: styles.container
+  }));
 };
-var _default = MessageTime;
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    marginRight: 8,
+    padding: 4
+  }
+});
+var _default = AttachmentsButton;
 exports.default = _default;
-//# sourceMappingURL=MessageTime.js.map
+//# sourceMappingURL=AttachmentsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitReactNativeFoundation","obj","__esModule","default","AttachmentsButton","_ref","onPress","disabled","colors","useUIKitTheme","createElement","TouchableOpacity","Icon","color","ui","input","highlight","active","icon","size","containerStyle","styles","container","createStyleSheet","marginRight","padding","_default","exports"],"sources":["AttachmentsButton.tsx"],"sourcesContent":["import React from 'react';\nimport { TouchableOpacity } from 'react-native';\n\nimport { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nexport type AttachmentsButtonProps = {\n  onPress: () => void;\n  disabled: boolean;\n};\n\nconst AttachmentsButton = ({ onPress, disabled }: AttachmentsButtonProps) => {\n  const { colors } = useUIKitTheme();\n  return (\n    <TouchableOpacity onPress={onPress} disabled={disabled}>\n      <Icon\n        color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}\n        icon={'add'}\n        size={24}\n        containerStyle={styles.container}\n      />\n    </TouchableOpacity>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    marginRight: 8,\n    padding: 4,\n  },\n});\n\nexport default AttachmentsButton;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,2BAAA,GAAAF,OAAA;AAAgG,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOhG,MAAMG,iBAAiB,GAAGC,IAAA,IAAmD;EAAA,IAAlD;IAAEC,OAAO;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EACtE,MAAM;IAAEG;EAAO,CAAC,GAAG,IAAAC,yCAAa,GAAE;EAClC,oBACEb,MAAA,CAAAO,OAAA,CAAAO,aAAA,CAACX,YAAA,CAAAY,gBAAgB;IAACL,OAAO,EAAEA,OAAQ;IAACC,QAAQ,EAAEA;EAAS,gBACrDX,MAAA,CAAAO,OAAA,CAAAO,aAAA,CAACV,2BAAA,CAAAY,IAAI;IACHC,KAAK,EAAEN,QAAQ,GAAGC,MAAM,CAACM,EAAE,CAACC,KAAK,CAACZ,OAAO,CAACI,QAAQ,CAACS,SAAS,GAAGR,MAAM,CAACM,EAAE,CAACC,KAAK,CAACZ,OAAO,CAACc,MAAM,CAACD,SAAU;IACxGE,IAAI,EAAE,KAAM;IACZC,IAAI,EAAE,EAAG;IACTC,cAAc,EAAEC,MAAM,CAACC;EAAU,EACjC,CACe;AAEvB,CAAC;AAED,MAAMD,MAAM,GAAG,IAAAE,4CAAgB,EAAC;EAC9BD,SAAS,EAAE;IACTE,WAAW,EAAE,CAAC;IACdC,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAAC,IAAAC,QAAA,GAEYtB,iBAAiB;AAAAuB,OAAA,CAAAxB,OAAA,GAAAuB,QAAA"}

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

@@ -18,14 +18,14 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
     messageToEdit,
     setMessageToEdit,
     onPressUpdateUserMessage,
-    onUpdateUserMessage,
     onSelectionChange,
     autoFocus,
     mentionedUsers,
     inputDisabled
   } = _ref;
   const {
-    mentionManager
+    mentionManager,
+    sbOptions
   } = (0, _useContext.useSendbirdChat)();
   const {
     STRINGS
@@ -39,21 +39,13 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
     if (messageToEdit.isUserMessage()) {
       const mentionType = _message.MentionType.USERS;
       const mentionedUserIds = mentionedUsers.map(it => it.user.userId);
-      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
-      if (onPressUpdateUserMessage) {
-        onPressUpdateUserMessage(messageToEdit, {
-          message: text,
-          mentionType,
-          mentionedUserIds,
-          mentionedMessageTemplate
-        }).catch(onFailureToUpdate);
-      } else if (onUpdateUserMessage) {
-        onUpdateUserMessage(text, messageToEdit, {
-          type: _message.MentionType.USERS,
-          userIds: mentionedUserIds,
-          messageTemplate: mentionedMessageTemplate
-        }).catch(onFailureToUpdate);
-      }
+      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention);
+      onPressUpdateUserMessage(messageToEdit, {
+        message: text,
+        mentionType,
+        mentionedUserIds,
+        mentionedMessageTemplate
+      }).catch(onFailureToUpdate);
     }
     setMessageToEdit();
     onChangeText('');
@@ -73,7 +65,7 @@ const EditInput = /*#__PURE__*/(0, _react.forwardRef)(function EditInput(_ref, r
     style: styles.input,
     placeholder: STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE,
     onSelectionChange: onSelectionChange
-  }, mentionManager.textToMentionedComponents(text, mentionedUsers))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+  }, mentionManager.textToMentionedComponents(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: {
       marginTop: 8,
       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","onUpdateUserMessage","onSelectionChange","autoFocus","mentionedUsers","inputDisabled","mentionManager","useSendbirdChat","STRINGS","useLocalization","toast","useToast","onPressCancel","onPressSave","isUserMessage","mentionType","MentionType","USERS","mentionedUserIds","map","it","user","userId","mentionedMessageTemplate","textToMentionedMessageTemplate","message","catch","onFailureToUpdate","type","userIds","messageTemplate","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    onUpdateUserMessage,\n    onSelectionChange,\n    autoFocus,\n    mentionedUsers,\n    inputDisabled,\n  },\n  ref,\n) {\n  const { mentionManager } = 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(text, mentionedUsers);\n\n      if (onPressUpdateUserMessage) {\n        onPressUpdateUserMessage(messageToEdit, {\n          message: text,\n          mentionType,\n          mentionedUserIds,\n          mentionedMessageTemplate,\n        }).catch(onFailureToUpdate);\n      } else if (onUpdateUserMessage) {\n        onUpdateUserMessage(text, messageToEdit, {\n          type: MentionType.USERS,\n          userIds: mentionedUserIds,\n          messageTemplate: mentionedMessageTemplate,\n        }).catch(onFailureToUpdate);\n      }\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(text, mentionedUsers)}\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","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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"}

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

@@ -17,184 +17,53 @@ 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 SendInput = /*#__PURE__*/(0, _react.forwardRef)(function SendInput(_ref, ref) {
   let {
+    AttachmentsButton,
     onPressSendUserMessage,
     onPressSendFileMessage,
-    onSendUserMessage,
-    onSendFileMessage,
     text,
     onChangeText,
     onSelectionChange,
     mentionedUsers,
     inputDisabled,
     inputFrozen,
-    inputMuted
+    inputMuted,
+    channel
   } = _ref;
   const {
     mentionManager,
-    imageCompressionConfig,
-    features
+    sbOptions
   } = (0, _useContext.useSendbirdChat)();
   const {
     STRINGS
   } = (0, _useContext.useLocalization)();
-  const {
-    fileService,
-    mediaService
-  } = (0, _useContext.usePlatformService)();
   const {
     colors
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
   const {
     openSheet
   } = (0, _uikitReactNativeFoundation.useBottomSheet)();
-  const {
-    alert
-  } = (0, _uikitReactNativeFoundation.useAlert)();
   const toast = (0, _uikitReactNativeFoundation.useToast)();
+  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
   const sendUserMessage = () => {
     const mentionType = _message.MentionType.USERS;
     const mentionedUserIds = mentionedUsers.map(it => it.user.userId);
-    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
-    if (onPressSendUserMessage) {
-      onPressSendUserMessage({
-        message: text,
-        mentionType,
-        mentionedUserIds,
-        mentionedMessageTemplate
-      }).catch(onFailureToSend);
-    } else if (onSendUserMessage) {
-      onSendUserMessage(text, {
-        type: mentionType,
-        userIds: mentionedUserIds,
-        messageTemplate: mentionedMessageTemplate
-      }).catch(onFailureToSend);
-    }
+    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention);
+    onPressSendUserMessage({
+      message: text,
+      mentionType,
+      mentionedUserIds,
+      mentionedMessageTemplate
+    }).catch(onFailureToSend);
     onChangeText('');
   };
-  const sendFileMessage = file => {
-    if (onPressSendFileMessage) {
-      onPressSendFileMessage({
-        file
-      }).catch(onFailureToSend);
-    } else if (onSendFileMessage) {
-      onSendFileMessage(file).catch(onFailureToSend);
-    }
-  };
-  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
-  const onPressAttachment = () => {
-    openSheet({
-      sheetItems: [{
-        title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA,
-        icon: 'camera',
-        onPress: async () => {
-          const mediaFile = await fileService.openCamera({
-            mediaType: 'all',
-            onOpenFailure: error => {
-              if (error.code === _SBUError.default.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.default.openSettings()
-                  }]
-                });
-              } else {
-                toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
-              }
-            }
-          });
-          if (mediaFile) {
-            // Image compression
-            if ((0, _uikitUtils.isImage)(mediaFile.uri, mediaFile.type) && (0, _uikitUtils.shouldCompressImage)(mediaFile.type, features.imageCompressionEnabled)) {
-              await _SBUUtils.default.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);
-          }
-        }
-      }, {
-        title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
-        icon: 'photo',
-        onPress: async () => {
-          const mediaFiles = await fileService.openMediaLibrary({
-            selectionLimit: 1,
-            mediaType: 'all',
-            onOpenFailure: error => {
-              if (error.code === _SBUError.default.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.default.openSettings()
-                  }]
-                });
-              } else {
-                toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
-              }
-            }
-          });
-          if (mediaFiles && mediaFiles[0]) {
-            const mediaFile = mediaFiles[0];
-
-            // Image compression
-            if ((0, _uikitUtils.isImage)(mediaFile.uri, mediaFile.type) && (0, _uikitUtils.shouldCompressImage)(mediaFile.type, features.imageCompressionEnabled)) {
-              await _SBUUtils.default.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);
-          }
-        }
-      }, {
-        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 ((0, _uikitUtils.isImage)(documentFile.uri, documentFile.type) && (0, _uikitUtils.shouldCompressImage)(documentFile.type, features.imageCompressionEnabled)) {
-              await _SBUUtils.default.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;
-                }
-              });
-            }
-            sendFileMessage(documentFile);
-          }
-        }
-      }]
-    });
-  };
+  const sheetItems = useChannelInputItems(channel, file => {
+    onPressSendFileMessage({
+      file
+    }).catch(onFailureToSend);
+  });
+  const onPressAttachment = () => openSheet({
+    sheetItems
+  });
   const getPlaceholder = () => {
     if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
     if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
@@ -203,15 +72,10 @@ const SendInput = /*#__PURE__*/(0, _react.forwardRef)(function SendInput(_ref, r
   };
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.sendInputContainer
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, AttachmentsButton && /*#__PURE__*/_react.default.createElement(AttachmentsButton, {
     onPress: onPressAttachment,
     disabled: inputDisabled
-  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
-    color: inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight,
-    icon: 'add',
-    size: 24,
-    containerStyle: styles.iconAttach
-  })), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.TextInput, {
     ref: ref,
     multiline: true,
     disableFullscreenUI: true,
@@ -220,7 +84,7 @@ const SendInput = /*#__PURE__*/(0, _react.forwardRef)(function SendInput(_ref, r
     onChangeText: onChangeText,
     style: styles.input,
     placeholder: getPlaceholder()
-  }, mentionManager.textToMentionedComponents(text, mentionedUsers)), Boolean(text.trim()) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+  }, mentionManager.textToMentionedComponents(text, mentionedUsers, sbOptions.uikit.groupChannel.channel.enableMention)), Boolean(text.trim()) && /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
     onPress: sendUserMessage,
     disabled: inputDisabled
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
@@ -230,6 +94,203 @@ const SendInput = /*#__PURE__*/(0, _react.forwardRef)(function SendInput(_ref, r
     containerStyle: styles.iconSend
   })));
 });
+const useChannelInputItems = (channel, sendFileMessage) => {
+  const {
+    sbOptions,
+    imageCompressionConfig
+  } = (0, _useContext.useSendbirdChat)();
+  const {
+    STRINGS
+  } = (0, _useContext.useLocalization)();
+  const {
+    fileService,
+    mediaService
+  } = (0, _useContext.usePlatformService)();
+  const {
+    alert
+  } = (0, _uikitReactNativeFoundation.useAlert)();
+  const toast = (0, _uikitReactNativeFoundation.useToast)();
+  const sheetItems = [];
+  const input = (0, _uikitUtils.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
+          }
+        };
+    }
+  });
+  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.default.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.default.openSettings()
+                }]
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+            }
+          }
+        });
+        if (mediaFile) {
+          // Image compression
+          if ((0, _uikitUtils.isImage)(mediaFile.uri, mediaFile.type) && (0, _uikitUtils.shouldCompressImage)(mediaFile.type, sbOptions.chat.imageCompressionEnabled)) {
+            await _SBUUtils.default.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.default.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.default.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.default.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.default.openSettings()
+                }]
+              });
+            } else {
+              toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+            }
+          }
+        });
+        if (mediaFiles && mediaFiles[0]) {
+          const mediaFile = mediaFiles[0];
+
+          // Image compression
+          if ((0, _uikitUtils.isImage)(mediaFile.uri, mediaFile.type) && (0, _uikitUtils.shouldCompressImage)(mediaFile.type, sbOptions.chat.imageCompressionEnabled)) {
+            await _SBUUtils.default.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 ((0, _uikitUtils.isImage)(documentFile.uri, documentFile.type) && (0, _uikitUtils.shouldCompressImage)(documentFile.type, sbOptions.chat.imageCompressionEnabled)) {
+            await _SBUUtils.default.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;
+              }
+            });
+          }
+          sendFileMessage(documentFile);
+        }
+      }
+    });
+  }
+  return sheetItems;
+};
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   sendInputContainer: {
     paddingVertical: 10,
@@ -247,10 +308,6 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
     }),
     borderRadius: 20
   },
-  iconAttach: {
-    marginRight: 8,
-    padding: 4
-  },
   iconSend: {
     marginLeft: 4,
     padding: 4