fix: message input focus responsiveness (#3202)

* fix: message input focus responsiveness

* fix: styles for message input auto complete input

Author: khushal87

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -142,6 +142,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
         {
           color: black,
           maxHeight: (textHeight || 17) * numberOfLines,
+          paddingHorizontal: command ? 4 : 16,
           textAlign: I18nManager.isRTL ? 'right' : 'left',
         },
         inputBox,
@@ -205,8 +206,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 16,
     includeFontPadding: false, // for android vertical text centering
-    padding: 0, // removal of default text input padding on android
-    paddingTop: 0, // removal of iOS top padding for weird centering
+    paddingVertical: 12,
     textAlignVertical: 'center', // for android vertical text centering
   },
 });

package/src/components/MessageInput/AttachmentUploadPreviewList.tsx

@@ -185,7 +185,7 @@ const UnMemoizedAttachmentUploadListPreview = (
   }
 
   return (
-    <View style={[wrapper]}>
+    <View style={[styles.wrapper, wrapper]}>
       {imageUploads.length ? (
         <FlatList
           data={imageUploads}
@@ -264,10 +264,13 @@ export const AttachmentUploadPreviewList = (props: AttachmentUploadPreviewListPr
 const styles = StyleSheet.create({
   attachmentSeparator: {
     borderBottomWidth: 1,
-    marginBottom: 10,
+    marginVertical: 8,
+  },
+  filesFlatList: { maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
+  imagesFlatList: {},
+  wrapper: {
+    paddingTop: 12,
   },
-  filesFlatList: { marginBottom: 12, maxHeight: FILE_PREVIEW_HEIGHT * 2.5 + 16 },
-  imagesFlatList: { paddingBottom: 12 },
 });
 
 AttachmentUploadPreviewList.displayName =

package/src/components/MessageInput/MessageInput.tsx

@@ -70,8 +70,6 @@ const styles = StyleSheet.create({
   autoCompleteInputContainer: {
     alignItems: 'center',
     flexDirection: 'row',
-    paddingLeft: 16,
-    paddingRight: 16,
   },
   composerContainer: {
     alignItems: 'center',
@@ -92,7 +90,7 @@ const styles = StyleSheet.create({
   optionsContainer: {
     flexDirection: 'row',
   },
-  replyContainer: { paddingBottom: 12, paddingHorizontal: 8 },
+  replyContainer: { paddingBottom: 0, paddingHorizontal: 8, paddingTop: 8 },
   sendButtonContainer: {},
   suggestionsListContainer: {
     position: 'absolute',
@@ -494,7 +492,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                       styles.inputBoxContainer,
                       {
                         borderColor: grey_whisper,
-                        paddingVertical: command ? 8 : 12,
                       },
                       inputBoxContainer,
                       isFocused ? focusedInputBoxContainer : null,
@@ -505,6 +502,7 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
                         <Reply />
                       </View>
                     )}
+
                     <AttachmentUploadPreviewList />
                     {command ? (
                       <CommandInput disabled={!isOnline} />

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -2135,7 +2135,6 @@ exports[`Thread should match thread snapshot 1`] = `
               },
               {
                 "borderColor": "#ECEBEB",
-                "paddingVertical": 12,
               },
               {},
               null,
@@ -2148,8 +2147,6 @@ exports[`Thread should match thread snapshot 1`] = `
                 {
                   "alignItems": "center",
                   "flexDirection": "row",
-                  "paddingLeft": 16,
-                  "paddingRight": 16,
                 },
                 {},
               ]
@@ -2171,13 +2168,13 @@ exports[`Thread should match thread snapshot 1`] = `
                     "flex": 1,
                     "fontSize": 16,
                     "includeFontPadding": false,
-                    "padding": 0,
-                    "paddingTop": 0,
+                    "paddingVertical": 12,
                     "textAlignVertical": "center",
                   },
                   {
                     "color": "#000000",
                     "maxHeight": 85,
+                    "paddingHorizontal": 16,
                     "textAlign": "left",
                   },
                   {},