Merge pull request Expensify#44428 from huult/43615-keyboard-overlap-…

…edit-message

fix keyboard overlap composer

src/libs/ReportActionItemEventHandler/index.android.ts

@@ -0,0 +1,14 @@
+import {InteractionManager} from 'react-native';
+import type ReportActionItemEventHandler from './types';
+
+const reportActionItemEventHandler: ReportActionItemEventHandler = {
+    handleComposerLayoutChange: (reportScrollManager, index) => () => {
+        InteractionManager.runAfterInteractions(() => {
+            requestAnimationFrame(() => {
+                reportScrollManager.scrollToIndex(index, true);
+            });
+        });
+    },
+};
+
+export default reportActionItemEventHandler;

src/libs/ReportActionItemEventHandler/index.ts

@@ -0,0 +1,7 @@
+import type ReportActionItemEventHandler from './types';
+
+const reportActionItemEventHandler: ReportActionItemEventHandler = {
+    handleComposerLayoutChange: () => () => {},
+};
+
+export default reportActionItemEventHandler;

src/libs/ReportActionItemEventHandler/types.ts

@@ -0,0 +1,8 @@
+import type {LayoutChangeEvent} from 'react-native';
+import type ReportScrollManagerData from '@hooks/useReportScrollManager/types';
+
+type ReportActionItemEventHandler = {
+    handleComposerLayoutChange: (reportScrollManager: ReportScrollManagerData, index: number) => (event: LayoutChangeEvent) => void;
+};
+
+export default ReportActionItemEventHandler;

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -1,8 +1,8 @@
 import lodashDebounce from 'lodash/debounce';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {InteractionManager, Keyboard, View} from 'react-native';
 import type {NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputKeyPressEventData} from 'react-native';
+import {InteractionManager, Keyboard, View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {Emoji} from '@assets/emojis/types';
 import Composer from '@components/Composer';
@@ -29,6 +29,7 @@ import focusEditAfterCancelDelete from '@libs/focusEditAfterCancelDelete';
 import {parseHtmlToMarkdown} from '@libs/OnyxAwareParser';
 import onyxSubscribe from '@libs/onyxSubscribe';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
+import reportActionItemEventHandler from '@libs/ReportActionItemEventHandler';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import setShouldShowComposeInputKeyboardAware from '@libs/setShouldShowComposeInputKeyboardAware';
@@ -435,6 +436,7 @@ function ReportActionItemMessageEdit(
                                 }
                                 setShouldShowComposeInputKeyboardAware(true);
                             }}
+                            onLayout={reportActionItemEventHandler.handleComposerLayoutChange(reportScrollManager, index)}
                             selection={selection}
                             onSelectionChange={(e) => setSelection(e.nativeEvent.selection)}
                             isGroupPolicyReport={isGroupPolicyReport}