Fix/regression 18110 composer should have the same height in other platforms

src/components/Composer/index.js

@@ -426,6 +426,10 @@ class Composer extends React.Component {
     }
 
     render() {
+        let paddingValue = 5;
+        if (this.props.numberOfLines === 1) paddingValue = 9;
+        // In case numberOfLines = 3, there will be a Expand Icon appearing at the top left, so it has to be recalculated so that the textArea can be full height
+        if (this.props.numberOfLines === 3) paddingValue = 8;
         const propStyles = StyleSheet.flatten(this.props.style);
         propStyles.outline = 'none';
         const propsWithoutStyles = _.omit(this.props, 'style');
@@ -471,6 +475,7 @@ class Composer extends React.Component {
                         // We are hiding the scrollbar to prevent it from reducing the text input width,
                         // so we can get the correct scroll height while calculating the number of lines.
                         this.state.numberOfLines < this.props.maxLines ? styles.overflowHidden : {},
+                        {paddingTop: paddingValue, paddingBottom: paddingValue},
                     ]}
                     /* eslint-disable-next-line react/jsx-props-no-spreading */
                     {...propsWithoutStyles}

src/pages/home/report/ReportActionCompose.js

@@ -53,6 +53,7 @@ import * as ComposerActions from '../../../libs/actions/Composer';
 import * as Welcome from '../../../libs/actions/Welcome';
 import Permissions from '../../../libs/Permissions';
 import * as TaskUtils from '../../../libs/actions/Task';
+import getContainerComposeStyle from '../../../styles/getContainerComposeStyles';
 import * as Browser from '../../../libs/Browser';
 
 const propTypes = {
@@ -1041,7 +1042,7 @@ class ReportActionCompose extends React.Component {
                                             </>
                                         )}
                                     </AttachmentPicker>
-                                    <View style={[styles.textInputComposeSpacing, styles.textInputComposeBorder]}>
+                                    <View style={getContainerComposeStyle()}>
                                         <DragAndDrop
                                             dropZoneId={CONST.REPORT.DROP_NATIVE_ID}
                                             activeDropZoneId={CONST.REPORT.ACTIVE_DROP_NATIVE_ID}

src/styles/getContainerComposeStyles/index.js

@@ -0,0 +1,3 @@
+import styles from '../styles';
+// we need to set paddingVertical = 0 on the web to avoid App displays normal pointer on some parts of compose box when not in focus
+export default () => [styles.textInputComposeSpacing, styles.textInputComposeBorder, {paddingVertical: 0}];

src/styles/getContainerComposeStyles/index.native.js

@@ -0,0 +1,3 @@
+import styles from '../styles';
+
+export default () => [styles.textInputComposeSpacing, styles.textInputComposeBorder];