@sendbird/uikit-react-native 3.2.0 → 3.3.0

package/lib/module/utils/promise.js

@@ -0,0 +1,132 @@
+import 'react-native';
+
+/**
+ * This file contains subcomponents with separate copyright notices and license terms.
+ * Your use of the source code for these subcomponents is subject to the terms and conditions of the following licenses.
+ *
+ * MIT License: https://github.com/then/promise
+ *
+ * Copyright (c) 2014 Forbes Lindesay
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Original code: https://github.com/then/promise/blob/master/src/es6-extensions.js
+ * */
+let iterableToArray = function (iterable) {
+  if (typeof Array.from === 'function') {
+    // ES2015+, iterables exist
+    iterableToArray = Array.from;
+    return Array.from(iterable);
+  }
+
+  // ES5, only arrays and array-likes exist
+  iterableToArray = function (x) {
+    return Array.prototype.slice.call(x);
+  };
+  return Array.prototype.slice.call(iterable);
+};
+function onSettledFulfill(value) {
+  return {
+    status: 'fulfilled',
+    value: value
+  };
+}
+function onSettledReject(reason) {
+  return {
+    status: 'rejected',
+    reason: reason
+  };
+}
+function mapAllSettled(item) {
+  if (item && (typeof item === 'object' || typeof item === 'function')) {
+    if (item instanceof Promise && item.then === Promise.prototype.then) {
+      return item.then(onSettledFulfill, onSettledReject);
+    }
+    // @ts-expect-error
+    const then = item.then;
+    if (typeof then === 'function') {
+      return new Promise(then.bind(item)).then(onSettledFulfill, onSettledReject);
+    }
+  }
+
+  // @ts-expect-error
+  return onSettledFulfill(item);
+}
+function getAggregateError(errors) {
+  if (typeof AggregateError === 'function') {
+    return new AggregateError(errors, 'All promises were rejected');
+  }
+  const error = new Error('All promises were rejected');
+  error.name = 'AggregateError';
+  error.errors = errors;
+  return error;
+}
+export const PromisePolyfill = {
+  allSettled(values) {
+    return Promise.all(iterableToArray(values).map(mapAllSettled));
+  },
+  race(values) {
+    return new Promise(function (resolve, reject) {
+      iterableToArray(values).forEach(function (value) {
+        Promise.resolve(value).then(resolve, reject);
+      });
+    });
+  },
+  any(values) {
+    return new Promise(function (resolve, reject) {
+      const promises = iterableToArray(values);
+      let hasResolved = false;
+      const rejectionReasons = [];
+      function resolveOnce(value) {
+        if (!hasResolved) {
+          hasResolved = true;
+          resolve(value);
+        }
+      }
+      function rejectionCheck(reason) {
+        rejectionReasons.push(reason);
+        if (rejectionReasons.length === promises.length) {
+          reject(getAggregateError(rejectionReasons));
+        }
+      }
+      if (promises.length === 0) {
+        reject(getAggregateError(rejectionReasons));
+      } else {
+        promises.forEach(function (value) {
+          Promise.resolve(value).then(resolveOnce, rejectionCheck);
+        });
+      }
+    });
+  },
+  apply() {
+    // https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Utilities/PolyfillFunctions.js
+    if (typeof global !== 'undefined' && 'Promise' in global) {
+      if (!global.Promise.allSettled) {
+        global.Promise.allSettled = this.allSettled;
+      }
+      if (!global.Promise.any) {
+        global.Promise.any = this.any;
+      }
+      if (!global.Promise.race) {
+        global.Promise.race = this.race;
+      }
+    }
+  }
+};
+//# sourceMappingURL=promise.js.map

package/lib/module/utils/promise.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iterableToArray","iterable","Array","from","x","prototype","slice","call","onSettledFulfill","value","status","onSettledReject","reason","mapAllSettled","item","Promise","then","bind","getAggregateError","errors","AggregateError","error","Error","name","PromisePolyfill","allSettled","values","all","map","race","resolve","reject","forEach","any","promises","hasResolved","rejectionReasons","resolveOnce","rejectionCheck","push","length","apply","global"],"sources":["promise.ts"],"sourcesContent":["import 'react-native';\n\n/**\n * This file contains subcomponents with separate copyright notices and license terms.\n * Your use of the source code for these subcomponents is subject to the terms and conditions of the following licenses.\n *\n * MIT License: https://github.com/then/promise\n *\n * Copyright (c) 2014 Forbes Lindesay\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *\n * Original code: https://github.com/then/promise/blob/master/src/es6-extensions.js\n * */\nlet iterableToArray = function <T>(iterable: Iterable<T | PromiseLike<T>>): (T | PromiseLike<T>)[] {\n  if (typeof Array.from === 'function') {\n    // ES2015+, iterables exist\n    iterableToArray = Array.from;\n    return Array.from(iterable);\n  }\n\n  // ES5, only arrays and array-likes exist\n  iterableToArray = function (x) {\n    return Array.prototype.slice.call(x);\n  };\n  return Array.prototype.slice.call(iterable);\n};\n\nfunction onSettledFulfill<T>(value: T) {\n  return { status: 'fulfilled', value: value } as const;\n}\n\nfunction onSettledReject<T>(reason: T) {\n  return { status: 'rejected', reason: reason } as const;\n}\n\nfunction mapAllSettled<T>(item: T | PromiseLike<T>): PromiseLike<PromiseSettledResult<T>> | PromiseSettledResult<T> {\n  if (item && (typeof item === 'object' || typeof item === 'function')) {\n    if (item instanceof Promise && item.then === Promise.prototype.then) {\n      return item.then(onSettledFulfill, onSettledReject);\n    }\n    // @ts-expect-error\n    const then = item.then;\n    if (typeof then === 'function') {\n      return new Promise<T>(then.bind(item)).then(onSettledFulfill, onSettledReject);\n    }\n  }\n\n  // @ts-expect-error\n  return onSettledFulfill(item);\n}\n\nfunction getAggregateError(errors: unknown[]) {\n  if (typeof AggregateError === 'function') {\n    return new AggregateError(errors, 'All promises were rejected');\n  }\n\n  const error = new Error('All promises were rejected') as Error & { errors: unknown[] };\n\n  error.name = 'AggregateError';\n  error.errors = errors;\n\n  return error;\n}\n\nexport const PromisePolyfill = {\n  allSettled<T extends readonly unknown[] | []>(values: T) {\n    return Promise.all(iterableToArray(values).map(mapAllSettled)) as Promise<{\n      -readonly [P in keyof T]: PromiseSettledResult<Awaited<T[P]>>;\n    }>;\n  },\n  race<T>(values: Iterable<T | PromiseLike<T>>): Promise<Awaited<T>> {\n    return new Promise(function (resolve, reject) {\n      iterableToArray(values).forEach(function (value) {\n        Promise.resolve(value).then(resolve, reject);\n      });\n    });\n  },\n  any<T>(values: Iterable<T | PromiseLike<T>>): Promise<Awaited<T>> {\n    return new Promise<Awaited<T>>(function (resolve, reject) {\n      const promises = iterableToArray(values);\n      let hasResolved = false;\n      const rejectionReasons: unknown[] = [];\n\n      function resolveOnce(value: Awaited<T>) {\n        if (!hasResolved) {\n          hasResolved = true;\n          resolve(value);\n        }\n      }\n\n      function rejectionCheck(reason: unknown) {\n        rejectionReasons.push(reason);\n\n        if (rejectionReasons.length === promises.length) {\n          reject(getAggregateError(rejectionReasons));\n        }\n      }\n\n      if (promises.length === 0) {\n        reject(getAggregateError(rejectionReasons));\n      } else {\n        promises.forEach(function (value) {\n          Promise.resolve(value).then(resolveOnce, rejectionCheck);\n        });\n      }\n    });\n  },\n  apply() {\n    // https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Utilities/PolyfillFunctions.js\n    if (typeof global !== 'undefined' && 'Promise' in global) {\n      if (!global.Promise.allSettled) {\n        global.Promise.allSettled = this.allSettled;\n      }\n      if (!global.Promise.any) {\n        global.Promise.any = this.any;\n      }\n      if (!global.Promise.race) {\n        global.Promise.race = this.race;\n      }\n    }\n  },\n};\n"],"mappings":"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"}

package/lib/module/version.js

@@ -1,3 +1,3 @@
-const VERSION = '3.2.0';
+const VERSION = '3.3.0';
 export default VERSION;
 //# sourceMappingURL=version.js.map

package/lib/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.2.0';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO"}
+{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.3.0';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO"}

package/lib/typescript/src/components/ChannelInput/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { StyleProp, TextStyle } from 'react-native';
 import { SendbirdBaseChannel, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdFileMessageUpdateParams, SendbirdMember, SendbirdUserMessage, SendbirdUserMessageCreateParams, SendbirdUserMessageUpdateParams } from '@sendbird/uikit-utils';
 import type { MentionedUser, Range } from '../../types';
 import type { AttachmentsButtonProps } from './AttachmentsButton';
@@ -14,6 +15,7 @@ export type SuggestedMentionListProps = {
     mentionedUsers: MentionedUser[];
 };
 export type ChannelInputProps = {
+    style?: StyleProp<TextStyle>;
     channel: SendbirdBaseChannel;
     shouldRenderInput: boolean;
     keyboardAvoidOffset: number;

package/lib/typescript/src/components/ChannelMessageList/index.d.ts

@@ -1,5 +1,6 @@
 import React, { Ref } from 'react';
 import { FlatList, FlatListProps } from 'react-native';
+import { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdFileMessage, SendbirdGroupChannel, SendbirdMessage, SendbirdOpenChannel, SendbirdUserMessage } from '@sendbird/uikit-utils';
 import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
 import type { CommonComponent } from '../../types';
@@ -38,6 +39,8 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
         channel: T;
         currentUserId?: ChannelMessageListProps<T>['currentUserId'];
         enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
+        bottomSheetItem?: BottomSheetItem;
+        isFirstItem: boolean;
     }) => React.ReactElement | null;
     renderNewMessagesButton: null | CommonComponent<{
         visible: boolean;

package/lib/typescript/src/components/GroupChannelMessageRenderer/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SendbirdMessage } from '@sendbird/uikit-utils';
+export declare const GroupChannelTypingIndicatorBubble: () => React.JSX.Element | null;
 declare const _default: React.MemoExoticComponent<(props: {
     focused: boolean;
     message: SendbirdMessage;
@@ -14,5 +15,7 @@ declare const _default: React.MemoExoticComponent<(props: {
     channel: import("@sendbird/chat/groupChannel").GroupChannel;
     currentUserId?: string | undefined;
     enableMessageGrouping: boolean;
+    bottomSheetItem?: import("@sendbird/uikit-react-native-foundation").BottomSheetItem | undefined;
+    isFirstItem: boolean;
 }) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null>;
 export default _default;

package/lib/typescript/src/components/OpenChannelMessageRenderer/index.d.ts

@@ -14,5 +14,7 @@ declare const _default: React.MemoExoticComponent<(props: {
     channel: import("@sendbird/chat/openChannel").OpenChannel;
     currentUserId?: string | undefined;
     enableMessageGrouping: boolean;
+    bottomSheetItem?: import("@sendbird/uikit-react-native-foundation").BottomSheetItem | undefined;
+    isFirstItem: boolean;
 }) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null>;
 export default _default;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -13,7 +13,7 @@ import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface, PlayerServiceInterface, RecorderServiceInterface } from '../platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.2.0";
+    VERSION: "3.3.0";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;

package/lib/typescript/src/domain/groupChannel/types.d.ts

@@ -131,4 +131,7 @@ export type GroupChannelPubSubContextPayload = {
     data: {
         messages: SendbirdMessage[];
     };
+} | {
+    type: 'TYPING_BUBBLE_RENDERED';
+    data?: undefined;
 };

package/lib/typescript/src/types.d.ts

@@ -27,3 +27,7 @@ export type Range = {
     start: number;
     end: number;
 };
+export declare enum TypingIndicatorType {
+    Text = "text",
+    Bubble = "bubble"
+}

package/lib/typescript/src/utils/promise.d.ts

@@ -0,0 +1,7 @@
+import 'react-native';
+export declare const PromisePolyfill: {
+    allSettled<T extends [] | readonly unknown[]>(values: T): Promise<{ -readonly [P in keyof T]: PromiseSettledResult<Awaited<T[P]>>; }>;
+    race<T_1>(values: Iterable<T_1 | PromiseLike<T_1>>): Promise<Awaited<T_1>>;
+    any<T_2>(values: Iterable<T_2 | PromiseLike<T_2>>): Promise<Awaited<T_2>>;
+    apply(): void;
+};

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.2.0";
+declare const VERSION = "3.3.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -59,10 +59,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "3.2.0",
-    "@sendbird/uikit-react-native-foundation": "3.2.0",
-    "@sendbird/uikit-tools": "^0.0.1-alpha.38",
-    "@sendbird/uikit-utils": "3.2.0"
+    "@sendbird/uikit-chat-hooks": "3.3.0",
+    "@sendbird/uikit-react-native-foundation": "3.3.0",
+    "@sendbird/uikit-tools": "0.0.1-alpha.42",
+    "@sendbird/uikit-utils": "3.3.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -202,5 +202,5 @@
       ]
     ]
   },
-  "gitHead": "dd029581f658a7970b14932df21d45a265694893"
+  "gitHead": "51adda5f33a7bb450b51ce30f505dcc9884e9586"
 }

package/src/components/ChannelInput/EditInput.tsx

@@ -1,11 +1,5 @@
 import React, { forwardRef } from 'react';
-import {
-  NativeSyntheticEvent,
-  Platform,
-  TextInput as RNTextInput,
-  TextInputSelectionChangeEventData,
-  View,
-} from 'react-native';
+import { NativeSyntheticEvent, TextInput as RNTextInput, TextInputSelectionChangeEventData, View } from 'react-native';
 
 import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
@@ -27,6 +21,7 @@ interface EditInputProps extends ChannelInputProps {
 
 const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   {
+    style,
     text,
     onChangeText,
     messageToEdit,
@@ -81,7 +76,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           editable={!inputDisabled}
           autoFocus={autoFocus}
           onChangeText={onChangeText}
-          style={styles.input}
+          style={style}
           placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
@@ -112,13 +107,6 @@ const styles = createStyleSheet({
     flexDirection: 'column',
     alignItems: 'center',
   },
-  input: {
-    flex: 1,
-    marginRight: 4,
-    minHeight: 36,
-    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
-    borderRadius: 20,
-  },
   inputWrapper: {
     flexDirection: 'row',
   },

package/src/components/ChannelInput/SendInput.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import {
   NativeSyntheticEvent,
-  Platform,
   TextInput as RNTextInput,
   TextInputSelectionChangeEventData,
   TouchableOpacity,
@@ -38,6 +37,7 @@ interface SendInputProps extends ChannelInputProps {
 
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    style,
     VoiceMessageInput,
     MessageToReplyPreview,
     AttachmentsButton,
@@ -173,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(
@@ -284,13 +284,6 @@ 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,
-  },
   sendIcon: {
     marginLeft: 4,
     padding: 4,

package/src/components/ChannelInput/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -39,6 +39,9 @@ export type SuggestedMentionListProps = {
 };
 
 export type ChannelInputProps = {
+  // style
+  style?: StyleProp<TextStyle>;
+
   // default
   channel: SendbirdBaseChannel;
   shouldRenderInput: boolean;
@@ -85,7 +88,7 @@ const ChannelInput = (props: ChannelInputProps) => {
   const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
 
   const { top, left, right, bottom } = useSafeAreaInsets();
-  const { colors } = useUIKitTheme();
+  const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
   const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
@@ -98,11 +101,18 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const mentionAvailable =
     sbOptions.uikit.groupChannel.channel.enableMention && channel.isGroupChannel() && !channel.isBroadcast;
-
   const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
+  const fontStyle = useMemo(() => {
+    if (!typography.body3.fontSize) return typography.body3;
+    // NOTE: iOS does not support textAlignVertical, so we should adjust lineHeight to center the text in multiline TextInput.
+    return { ...typography.body3, lineHeight: typography.body3.fontSize * 1.275, textAlignVertical: 'center' };
+  }, [typography.body3.fontSize]);
+
+  const textInputStyle = StyleSheet.flatten([styles.input, fontStyle, props.style]);
+
   useTypingTrigger(text, channel);
   useTextClearOnDisabled(onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
@@ -138,6 +148,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 VoiceMessageInput={props.VoiceMessageInput ?? VoiceMessageInput}
                 AttachmentsButton={props.AttachmentsButton ?? AttachmentsButton}
                 MessageToReplyPreview={props.MessageToReplyPreview ?? MessageToReplyPreview}
+                style={textInputStyle}
               />
             )}
             {inputMode === 'edit' && messageToEdit && (
@@ -152,6 +163,7 @@ const ChannelInput = (props: ChannelInputProps) => {
                 mentionedUsers={mentionedUsers}
                 messageToEdit={messageToEdit}
                 setMessageToEdit={setMessageToEdit}
+                style={textInputStyle}
               />
             )}
           </View>
@@ -211,6 +223,17 @@ const styles = createStyleSheet({
   inputDefault: {
     height: 56,
   },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    borderRadius: 20,
+    paddingTop: 8,
+    paddingBottom: 8,
+    minHeight: 36,
+    // Android - padding area is hidden
+    // iOS - padding area is visible
+    maxHeight: Platform.select({ ios: 36 * 2 + 16, android: 36 * 2 }),
+  },
 });
 
 export default React.memo(ChannelInput);