Composer - Keyboard overlaps the composer after selecting emoji

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -569,6 +569,7 @@ function MoneyRequestReportActionsList({
                     emojiReactions={actionEmojiReactions}
                     isReportArchived={isReportArchived}
                     draftMessage={matchingDraftMessageString}
+                    isReverted={false}
                     isTryNewDotNVPDismissed={isTryNewDotNVPDismissed}
                 />
             );

src/hooks/useReportScrollManager/index.native.ts

@@ -11,12 +11,12 @@ function useReportScrollManager(): ReportScrollManagerData {
      * Scroll to the provided index.
      */
     const scrollToIndex = useCallback(
-        (index: number) => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (index: number, isEditing?: boolean, viewPosition?: number) => {
             if (!flatListRef?.current) {
                 return;
             }
-
-            flatListRef.current.scrollToIndex({index});
+            flatListRef.current.scrollToIndex({index, viewPosition});
         },
         [flatListRef],
     );

src/hooks/useReportScrollManager/index.ts

@@ -9,12 +9,12 @@ function useReportScrollManager(): ReportScrollManagerData {
      * Scroll to the provided index. On non-native implementations we do not want to scroll when we are scrolling because
      */
     const scrollToIndex = useCallback(
-        (index: number, isEditing?: boolean) => {
+        (index: number, isEditing?: boolean, viewPosition?: number) => {
             if (!flatListRef?.current || isEditing) {
                 return;
             }
 
-            flatListRef.current.scrollToIndex({index, animated: true});
+            flatListRef.current.scrollToIndex({index, animated: true, viewPosition});
         },
         [flatListRef],
     );

src/hooks/useReportScrollManager/types.ts

@@ -2,7 +2,7 @@ import type {FlatListRefType} from '@pages/home/ReportScreenContext';
 
 type ReportScrollManagerData = {
     ref: FlatListRefType;
-    scrollToIndex: (index: number, isEditing?: boolean) => void;
+    scrollToIndex: (index: number, isEditing?: boolean, viewPosition?: number) => void;
     scrollToBottom: () => void;
     scrollToEnd: () => void;
     scrollToOffset: (offset: number) => void;

src/pages/home/report/PureReportActionItem.tsx

@@ -388,6 +388,9 @@ type PureReportActionItemProps = {
     /** Current user's account id */
     currentUserAccountID?: number;
 
+    /** Whether the flatlist is reverted */
+    isReverted?: boolean;
+
     /** The bank account list */
     bankAccountList?: OnyxTypes.BankAccountList | undefined;
 };
@@ -456,6 +459,7 @@ function PureReportActionItem({
     shouldHighlight = false,
     isTryNewDotNVPDismissed = false,
     currentUserAccountID,
+    isReverted,
     bankAccountList,
 }: PureReportActionItemProps) {
     const actionSheetAwareScrollViewContext = useContext(ActionSheetAwareScrollView.ActionSheetAwareScrollViewContext);
@@ -1492,6 +1496,7 @@ function PureReportActionItem({
                                         (chatIncludesConcierge(report) && isBlockedFromConcierge(blockedFromConcierge)) || isArchivedNonExpenseReport(report, isArchivedRoom)
                                     }
                                     isGroupPolicyReport={!!report?.policyID && report.policyID !== CONST.POLICY.ID_FAKE}
+                                    isReverted={isReverted}
                                 />
                             )}
                         </AttachmentContext.Provider>

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -83,6 +83,9 @@
     /** Whether report is from group policy */
     isGroupPolicyReport: boolean;
 
+    /** Whether the flatlist is reverted */
+    isReverted?: boolean;
+
     /** Reference to the outer element */
     ref?: ForwardedRef<TextInput | HTMLTextAreaElement | undefined>;
 };
@@ -106,6 +109,7 @@
     index,
     isGroupPolicyReport,
     shouldDisableEmojiPicker = false,
+    isReverted = true,
     ref,
 }: ReportActionItemMessageEditProps) {
     const [preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {canBeMissing: true});
@@ -417,6 +421,25 @@
         [cursorPositionValue, measureContainer, selection, isScrolling],
     );
 
+    const scrollToIndex = useCallback(
+        (i: number, isEditing?: boolean, viewPosition?: number, shouldDelay = false) => {
+            if (shouldDelay) {
+                setTimeout(() => {
+                    requestAnimationFrame(() => {
+                        reportScrollManager.scrollToIndex(i, isEditing, viewPosition);
+                    });
+                }, 400);
+            } else {
+                InteractionManager.runAfterInteractions(() => {
+                    requestAnimationFrame(() => {
+                        reportScrollManager.scrollToIndex(i, isEditing, viewPosition);
+                    });
+                });
+            }
+        },
+        [reportScrollManager],
+    );
+
     useEffect(() => {
         // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data.
         tag.set(findNodeHandle(textInputRef.current) ?? -1);
@@ -513,7 +536,7 @@
                                 // eslint-disable-next-line @typescript-eslint/no-deprecated
                                 InteractionManager.runAfterInteractions(() => {
                                     requestAnimationFrame(() => {
-                                        reportScrollManager.scrollToIndex(index, true);
+                                        scrollToIndex(index, true, isReverted ? 0 : 1, !isReverted);
                                         endScrollBlock();
                                     });
                                 });

src/pages/home/report/ReportActionItemParentAction.tsx

@@ -84,6 +84,8 @@ type ReportActionItemParentActionProps = {
     /** User billing fund ID */
     userBillingFundID: number | undefined;
 
+    /** Whether the flatlist is reverted */
+    isReverted?: boolean;
     /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */
     isTryNewDotNVPDismissed: boolean | undefined;
 
@@ -110,6 +112,7 @@ function ReportActionItemParentAction({
     allEmojiReactions,
     linkedTransactionRouteError,
     userBillingFundID,
+    isReverted,
     isTryNewDotNVPDismissed = false,
     isReportArchived = false,
 }: ReportActionItemParentActionProps) {
@@ -201,6 +204,7 @@ function ReportActionItemParentAction({
                                 linkedTransactionRouteError={linkedTransactionRouteError}
                                 userBillingFundID={userBillingFundID}
                                 isTryNewDotNVPDismissed={isTryNewDotNVPDismissed}
+                                isReverted={isReverted}
                             />
                         </OfflineWithFeedback>
                     );

src/pages/home/report/ReportActionsListItemRenderer.tsx

@@ -93,6 +93,8 @@ type ReportActionsListItemRendererProps = {
     /** All emoji reactions collection */
     allEmojiReactions?: OnyxCollection<ReportActionReactions>;
 
+    /** Whether the flatlist is reverted */
+    isReverted?: boolean;
     /** Did the user dismiss trying out NewDot? If true, it means they prefer using OldDot */
     isTryNewDotNVPDismissed: boolean | undefined;
     /** Whether the report is archived */
@@ -128,6 +130,7 @@ function ReportActionsListItemRenderer({
     personalDetails,
     allDraftMessages,
     allEmojiReactions,
+    isReverted,
     isTryNewDotNVPDismissed = false,
     isReportArchived = false,
 }: ReportActionsListItemRendererProps) {
@@ -226,6 +229,7 @@ function ReportActionsListItemRenderer({
                 allEmojiReactions={allEmojiReactions}
                 linkedTransactionRouteError={linkedTransactionRouteError}
                 userBillingFundID={userBillingFundID}
+                isReverted={isReverted}
                 isTryNewDotNVPDismissed={isTryNewDotNVPDismissed}
                 isReportArchived={isReportArchived}
             />
@@ -259,6 +263,7 @@ function ReportActionsListItemRenderer({
             emojiReactions={emojiReactions}
             linkedTransactionRouteError={linkedTransactionRouteError}
             userBillingFundID={userBillingFundID}
+            isReverted={isReverted}
             isTryNewDotNVPDismissed={isTryNewDotNVPDismissed}
         />
     );