fix/ copmpser hide on change screen size

src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.js

@@ -1,5 +1,5 @@
-import toggleReportActionComposeView from '../toggleReportActionComposeView';
+import * as Composer from '../actions/Composer';
 
-export default (isSmallScreenWidth = true) => {
-    toggleReportActionComposeView(true, isSmallScreenWidth);
+export default () => {
+    Composer.setShouldShowComposeInput(true);
 };

src/libs/openReportActionComposeViewWhenClosingMessageEdit/index.native.js

@@ -1,9 +1,9 @@
 import {Keyboard} from 'react-native';
-import toggleReportActionComposeView from '../toggleReportActionComposeView';
+import * as Composer from '../actions/Composer';
 
-export default (isSmallScreenWidth = true) => {
+export default () => {
     const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
-        toggleReportActionComposeView(true, isSmallScreenWidth);
+        Composer.setShouldShowComposeInput(true);
         keyboardDidHideListener.remove();
     });
 };

src/pages/home/ReportScreen.js

@@ -19,7 +19,6 @@ import ReportActionsView from './report/ReportActionsView';
 import CONST from '../../CONST';
 import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonView';
 import reportActionPropTypes from './report/reportActionPropTypes';
-import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView';
 import {withNetwork} from '../../components/OnyxProvider';
 import compose from '../../libs/compose';
 import Visibility from '../../libs/Visibility';
@@ -41,6 +40,7 @@ import EmojiPicker from '../../components/EmojiPicker/EmojiPicker';
 import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction';
 import TaskHeaderView from './TaskHeaderView';
 import MoneyRequestHeader from '../../components/MoneyRequestHeader';
+import * as ComposerActions from '../../libs/actions/Composer';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -147,7 +147,7 @@ class ReportScreen extends React.Component {
         });
 
         this.fetchReportIfNeeded();
-        toggleReportActionComposeView(true);
+        ComposerActions.setShouldShowComposeInput(true);
         Navigation.setIsReportScreenIsReady();
     }
 
@@ -163,7 +163,7 @@ class ReportScreen extends React.Component {
         }
 
         this.fetchReportIfNeeded();
-        toggleReportActionComposeView(true);
+        ComposerActions.setShouldShowComposeInput(true);
     }
 
     componentWillUnmount() {

src/pages/home/report/ReportActionCompose.js

@@ -35,7 +35,6 @@ import * as User from '../../../libs/actions/User';
 import Tooltip from '../../../components/Tooltip';
 import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
 import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
-import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import OfflineIndicator from '../../../components/OfflineIndicator';
 import ExceededCommentLength from '../../../components/ExceededCommentLength';
 import withNavigationFocus from '../../../components/withNavigationFocus';
@@ -51,6 +50,7 @@ import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager';
 import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
 import KeyboardShortcut from '../../../libs/KeyboardShortcut';
 import * as ComposerUtils from '../../../libs/ComposerUtils';
+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';
@@ -108,6 +108,9 @@ const propTypes = {
         expiresAt: PropTypes.string,
     }),
 
+    /** Whether the composer input should be shown */
+    shouldShowComposeInput: PropTypes.bool,
+
     /** Stores user's preferred skin tone */
     preferredSkinTone: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
@@ -145,6 +148,7 @@ const defaultProps = {
     isComposerFullSize: false,
     pendingAction: null,
     reports: {},
+    shouldShowComposeInput: true,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
 
@@ -204,7 +208,7 @@ class ReportActionCompose extends React.Component {
         this.shouldFocusInputOnScreenFocus = canFocusInputOnScreenFocus();
 
         this.state = {
-            isFocused: this.shouldFocusInputOnScreenFocus && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible,
+            isFocused: this.shouldFocusInputOnScreenFocus && !this.props.modal.isVisible && !this.props.modal.willAlertModalBecomeVisible && this.props.shouldShowComposeInput,
             isFullComposerAvailable: props.isComposerFullSize,
             textInputShouldClear: false,
             isCommentEmpty: props.comment.length === 0,
@@ -270,7 +274,7 @@ class ReportActionCompose extends React.Component {
     componentDidUpdate(prevProps) {
         const sidebarOpened = !prevProps.isDrawerOpen && this.props.isDrawerOpen;
         if (sidebarOpened) {
-            toggleReportActionComposeView(true);
+            ComposerActions.setShouldShowComposeInput(true);
         }
 
         // We want to focus or refocus the input when a modal has been closed and the underlying screen is focused.
@@ -1028,7 +1032,7 @@ class ReportActionCompose extends React.Component {
                                             disabled={this.props.disabled}
                                         >
                                             <Composer
-                                                autoFocus={!this.props.modal.isVisible && (this.shouldFocusInputOnScreenFocus || this.isEmptyChat())}
+                                                autoFocus={!this.props.modal.isVisible && (this.shouldFocusInputOnScreenFocus || this.isEmptyChat()) && this.props.shouldShowComposeInput}
                                                 multiline
                                                 ref={this.setTextInputRef}
                                                 textAlignVertical="top"
@@ -1214,5 +1218,8 @@ export default compose(
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS,
         },
+        shouldShowComposeInput: {
+            key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
+        },
     }),
 )(ReportActionCompose);

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -13,7 +13,6 @@ import * as StyleUtils from '../../../styles/StyleUtils';
 import Composer from '../../../components/Composer';
 import * as Report from '../../../libs/actions/Report';
 import * as ReportScrollManager from '../../../libs/ReportScrollManager';
-import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
 import openReportActionComposeViewWhenClosingMessageEdit from '../../../libs/openReportActionComposeViewWhenClosingMessageEdit';
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import compose from '../../../libs/compose';
@@ -32,6 +31,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState';
 import * as ComposerUtils from '../../../libs/ComposerUtils';
+import * as ComposerActions from '../../../libs/actions/Composer';
 
 const propTypes = {
     /** All the data of the action */
@@ -116,7 +116,7 @@ class ReportActionItemMessageEdit extends React.Component {
 
         // Show the main composer when the focused message is deleted from another client
         // to prevent the main composer stays hidden until we swtich to another chat.
-        toggleReportActionComposeView(true, this.props.isSmallScreenWidth);
+        ComposerActions.setShouldShowComposeInput(true);
     }
 
     /**
@@ -173,7 +173,7 @@ class ReportActionItemMessageEdit extends React.Component {
     deleteDraft() {
         this.debouncedSaveDraft.cancel();
         Report.saveReportActionDraft(this.props.reportID, this.props.action.reportActionID, '');
-        toggleReportActionComposeView(true, this.props.isSmallScreenWidth);
+        ComposerActions.setShouldShowComposeInput(true);
         ReportActionComposeFocusManager.focus();
 
         // Scroll to the last comment after editing to make sure the whole comment is clearly visible in the report.
@@ -304,7 +304,7 @@ class ReportActionItemMessageEdit extends React.Component {
                                 onFocus={() => {
                                     this.setState({isFocused: true});
                                     ReportScrollManager.scrollToIndex({animated: true, index: this.props.index}, true);
-                                    toggleReportActionComposeView(false, this.props.isSmallScreenWidth);
+                                    ComposerActions.setShouldShowComposeInput(false);
                                 }}
                                 onBlur={(event) => {
                                     this.setState({isFocused: false});
@@ -318,7 +318,7 @@ class ReportActionItemMessageEdit extends React.Component {
                                     if (this.messageEditInput === relatedTargetId) {
                                         return;
                                     }
-                                    openReportActionComposeViewWhenClosingMessageEdit(this.props.isSmallScreenWidth);
+                                    openReportActionComposeViewWhenClosingMessageEdit();
                                 }}
                                 selection={this.state.selection}
                                 onSelectionChange={this.onSelectionChange}

src/pages/home/report/ReportFooter.js

@@ -77,7 +77,7 @@ class ReportFooter extends React.Component {
                         )}
                     </View>
                 )}
-                {!hideComposer && this.props.shouldShowComposeInput && (
+                {!hideComposer && (this.props.shouldShowComposeInput || !this.props.isSmallScreenWidth) && (
                     <View style={[this.getChatFooterStyles(), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
                         <SwipeableView onSwipeDown={Keyboard.dismiss}>
                             <ReportActionCompose