From 48af2f255c715890ffb8f3f7e02ffb37cf610277 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 23 Sep 2024 13:37:30 +0700
Subject: [PATCH 01/27] change attachment target to prevInitialPageRef when
 current viewed attachment replaced / deleted

---
 .../Attachments/AttachmentCarousel/index.tsx           | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 72e0f17aa310..ed342b6558c0 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -70,6 +70,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     }, [canUseTouchScreen, page, setShouldShowArrows]);
 
     const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
+    const prevInitialPageRef = useRef<number | null>(null);
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
@@ -88,7 +89,11 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             return;
         }
 
-        const initialPage = targetAttachments.findIndex(compareImage);
+        let initialPage = targetAttachments.findIndex(compareImage);
+
+        if (initialPage === -1 && prevInitialPageRef.current != null && targetAttachments[prevInitialPageRef.current]) {
+            initialPage = prevInitialPageRef.current;
+        }
 
         // Dismiss the modal when deleting an attachment during its display in preview.
         if (initialPage === -1 && attachments.find(compareImage)) {
@@ -107,6 +112,9 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                 onNavigate(targetAttachments[initialPage]);
             }
         }
+        // Capture previous initialPage
+        prevInitialPageRef.current = initialPage;
+
     }, [report.privateNotes, reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate, accountID, type]);
 
     // Scroll position is affected when window width is resized, so we readjust it on width changes

From 6ece814e118b4c47bbba6c89373e172f41b6a57f Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 24 Sep 2024 05:11:54 +0700
Subject: [PATCH 02/27] don't dismiss only when the prev attachment with the
 same initialPage index is similar

---
 .../Attachments/AttachmentCarousel/index.tsx          | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index ed342b6558c0..dabba9c395da 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -71,6 +71,8 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
     const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
     const prevInitialPageRef = useRef<number | null>(null);
+    const prevInitialAttachmentRef = useRef<Attachment | null>(null);
+    const isAttachmentSimilar = (attachment1: Attachment, attachment2: Attachment) => attachment1.file?.name === attachment2.file?.name && attachment1.reportActionID === attachment2.reportActionID;
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
@@ -80,6 +82,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         } else {
             targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions: reportActions ?? undefined});
         }
+        console.log("[wildebug] ~ file: index.tsx:84 ~ useEffect ~ targetAttachments:", targetAttachments)
 
         if (isEqual(attachments, targetAttachments)) {
             if (attachments.length === 0) {
@@ -90,8 +93,13 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         }
 
         let initialPage = targetAttachments.findIndex(compareImage);
+        const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => source.toString().startsWith(prefix));
 
-        if (initialPage === -1 && prevInitialPageRef.current != null && targetAttachments[prevInitialPageRef.current]) {
+        if (initialPage === -1 && prevInitialPageRef.current != null
+            && prevInitialAttachmentRef.current != null
+            && targetAttachments[prevInitialPageRef.current]
+            && isUploading
+            && isAttachmentSimilar(prevInitialAttachmentRef.current, targetAttachments[prevInitialPageRef.current])) {
             initialPage = prevInitialPageRef.current;
         }
 
@@ -114,6 +122,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         }
         // Capture previous initialPage
         prevInitialPageRef.current = initialPage;
+        prevInitialAttachmentRef.current = targetAttachments[initialPage];
 
     }, [report.privateNotes, reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate, accountID, type]);
 

From 2f21ca5474ac89ad6d3c1fa028ffe3b7ad04bf9e Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 10:30:23 +0700
Subject: [PATCH 03/27] remove unnecessary code

---
 .../Attachments/AttachmentCarousel/index.tsx  | 25 ++++++-------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index dabba9c395da..35ef4df49a40 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -70,9 +70,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     }, [canUseTouchScreen, page, setShouldShowArrows]);
 
     const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
-    const prevInitialPageRef = useRef<number | null>(null);
-    const prevInitialAttachmentRef = useRef<Attachment | null>(null);
-    const isAttachmentSimilar = (attachment1: Attachment, attachment2: Attachment) => attachment1.file?.name === attachment2.file?.name && attachment1.reportActionID === attachment2.reportActionID;
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
@@ -82,7 +79,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         } else {
             targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions: reportActions ?? undefined});
         }
-        console.log("[wildebug] ~ file: index.tsx:84 ~ useEffect ~ targetAttachments:", targetAttachments)
 
         if (isEqual(attachments, targetAttachments)) {
             if (attachments.length === 0) {
@@ -93,18 +89,15 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
         }
 
         let initialPage = targetAttachments.findIndex(compareImage);
-        const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => source.toString().startsWith(prefix));
-
-        if (initialPage === -1 && prevInitialPageRef.current != null
-            && prevInitialAttachmentRef.current != null
-            && targetAttachments[prevInitialPageRef.current]
-            && isUploading
-            && isAttachmentSimilar(prevInitialAttachmentRef.current, targetAttachments[prevInitialPageRef.current])) {
-            initialPage = prevInitialPageRef.current;
+        const currentPage = attachments.findIndex(compareImage);
+
+        // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
+        if (initialPage === -1 && currentPage !== -1 && targetAttachments[currentPage]) {
+            initialPage = currentPage;
         }
 
-        // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && attachments.find(compareImage)) {
+        // If no matching attachment is found in both targetAttachments and attachments, dismiss the modal
+        if (initialPage === -1 && currentPage !== -1) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);
@@ -120,10 +113,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
                 onNavigate(targetAttachments[initialPage]);
             }
         }
-        // Capture previous initialPage
-        prevInitialPageRef.current = initialPage;
-        prevInitialAttachmentRef.current = targetAttachments[initialPage];
-
     }, [report.privateNotes, reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate, accountID, type]);
 
     // Scroll position is affected when window width is resized, so we readjust it on width changes

From 67c1f2b4affe730a0f644fa8392d26ac5fb34cce Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 10:34:15 +0700
Subject: [PATCH 04/27] adjust comment

---
 src/components/Attachments/AttachmentCarousel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 35ef4df49a40..6683e1fbc251 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -96,7 +96,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             initialPage = currentPage;
         }
 
-        // If no matching attachment is found in both targetAttachments and attachments, dismiss the modal
+        // If no matching attachment with the same index, dismiss the modal
         if (initialPage === -1 && currentPage !== -1) {
             Navigation.dismissModal();
         } else {

From f95d459570a581ae60b2f1ef3321f6ed1465c5af Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 10:55:47 +0700
Subject: [PATCH 05/27] fix lint, replace deprecated withOnyx

---
 .../Attachments/AttachmentCarousel/index.tsx  | 20 ++++++-------------
 1 file changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 6683e1fbc251..67fdba8aa181 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -5,7 +5,7 @@ import type {ListRenderItemInfo} from 'react-native';
 import {Keyboard, PixelRatio, View} from 'react-native';
 import type {GestureType} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Animated, {scrollTo, useAnimatedRef, useSharedValue} from 'react-native-reanimated';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
@@ -26,7 +26,7 @@ import CarouselButtons from './CarouselButtons';
 import CarouselItem from './CarouselItem';
 import extractAttachments from './extractAttachments';
 import AttachmentCarouselPagerContext from './Pager/AttachmentCarouselPagerContext';
-import type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps, UpdatePageProps} from './types';
+import type {AttachmentCarouselProps, UpdatePageProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 import useCarouselContextEvents from './useCarouselContextEvents';
 
@@ -38,7 +38,7 @@ const viewabilityConfig = {
 
 const MIN_FLING_VELOCITY = 500;
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -48,7 +48,8 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     const scrollRef = useAnimatedRef<Animated.FlatList<ListRenderItemInfo<Attachment>>>();
     const nope = useSharedValue(false);
     const pagerRef = useRef<GestureType>(null);
-
+    const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`, {canEvict: false});
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false});
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
     const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, true);
@@ -312,13 +313,4 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
-export default withOnyx<AttachmentCarouselProps, AttachmentCaraouselOnyxProps>({
-    parentReportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
-        canEvict: false,
-    },
-    reportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-        canEvict: false,
-    },
-})(AttachmentCarousel);
+export default AttachmentCarousel;

From de935c411dd2572e30291d818f16153c45f655a2 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 13:54:56 +0700
Subject: [PATCH 06/27] implement for native

---
 .../Attachments/AttachmentCarousel/index.native.tsx  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index e0f7571af8c7..36a012118767 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -38,10 +38,16 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
         }
 
-        const initialPage = targetAttachments.findIndex(compareImage);
+        let initialPage = targetAttachments.findIndex(compareImage);
+        const currentPage = attachments.findIndex(compareImage);
 
-        // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && attachments.find(compareImage)) {
+        // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
+        if (initialPage === -1 && currentPage !== -1 && targetAttachments[currentPage]) {
+            initialPage = currentPage;
+        }
+
+        // If no matching attachment with the same index, dismiss the modal
+        if (initialPage === -1 && currentPage !== -1) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);

From ce69418e30616418e9245f964f3a851638e04b4e Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 13:59:00 +0700
Subject: [PATCH 07/27] lint fix, replace deprecate withOnyx

---
 .../AttachmentCarousel/index.native.tsx       | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 36a012118767..7b6e4e15d389 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Keyboard, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -15,13 +15,15 @@ import CarouselButtons from './CarouselButtons';
 import extractAttachments from './extractAttachments';
 import type {AttachmentCarouselPagerHandle} from './Pager';
 import AttachmentCarouselPager from './Pager';
-import type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps} from './types';
+import type {AttachmentCarouselProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
+    const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`, {canEvict: false});
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false});
     const [page, setPage] = useState<number>();
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
@@ -150,13 +152,4 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
-export default withOnyx<AttachmentCarouselProps, AttachmentCaraouselOnyxProps>({
-    parentReportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
-        canEvict: false,
-    },
-    reportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-        canEvict: false,
-    },
-})(AttachmentCarousel);
+export default AttachmentCarousel;

From 613d8f3eaf4794bff1e24ad139918b1438387a28 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 14:51:42 +0700
Subject: [PATCH 08/27] typecheck fix

---
 .../Attachments/AttachmentCarousel/types.ts          | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
index d31ebbd328cd..84b11f416f74 100644
--- a/src/components/Attachments/AttachmentCarousel/types.ts
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -9,15 +9,7 @@ type UpdatePageProps = {
     viewableItems: ViewToken[];
 };
 
-type AttachmentCaraouselOnyxProps = {
-    /** Object of report actions for this report */
-    reportActions: OnyxEntry<ReportActions>;
-
-    /** The report actions of the parent report */
-    parentReportActions: OnyxEntry<ReportActions>;
-};
-
-type AttachmentCarouselProps = AttachmentCaraouselOnyxProps & {
+type AttachmentCarouselProps = {
     /** Source is used to determine the starting index in the array of attachments */
     source: AttachmentSource;
 
@@ -40,4 +32,4 @@ type AttachmentCarouselProps = AttachmentCaraouselOnyxProps & {
     onClose: () => void;
 };
 
-export type {AttachmentCarouselProps, UpdatePageProps, AttachmentCaraouselOnyxProps};
+export type {AttachmentCarouselProps, UpdatePageProps};

From f458e85c212734e49a272bd21ba9578c5b2e19fe Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Fri, 27 Sep 2024 14:53:27 +0700
Subject: [PATCH 09/27] remove unused code

---
 src/components/Attachments/AttachmentCarousel/types.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/types.ts b/src/components/Attachments/AttachmentCarousel/types.ts
index 84b11f416f74..c77e7b0f79d5 100644
--- a/src/components/Attachments/AttachmentCarousel/types.ts
+++ b/src/components/Attachments/AttachmentCarousel/types.ts
@@ -1,9 +1,8 @@
 import type {ViewToken} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import type CONST from '@src/CONST';
-import type {Report, ReportActions} from '@src/types/onyx';
+import type {Report} from '@src/types/onyx';
 
 type UpdatePageProps = {
     viewableItems: ViewToken[];

From 15ac1ed16cfd446e7c2c38fad3734e218666005a Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Sat, 28 Sep 2024 20:40:59 +0700
Subject: [PATCH 10/27] Update
 src/components/Attachments/AttachmentCarousel/index.tsx

Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com>
---
 src/components/Attachments/AttachmentCarousel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 67fdba8aa181..87bf84d65986 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -90,7 +90,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         }
 
         let initialPage = targetAttachments.findIndex(compareImage);
-        const currentPage = attachments.findIndex(compareImage);
+        const prevInitialPage = attachments.findIndex(compareImage);
 
         // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
         if (initialPage === -1 && currentPage !== -1 && targetAttachments[currentPage]) {

From b42d3cd62107d3724ed4adb53436e8e1ab9a7f4a Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 28 Sep 2024 20:41:36 +0700
Subject: [PATCH 11/27] refactor

---
 src/components/Attachments/AttachmentCarousel/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 87bf84d65986..612aa179c25c 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -93,12 +93,12 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const prevInitialPage = attachments.findIndex(compareImage);
 
         // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
-        if (initialPage === -1 && currentPage !== -1 && targetAttachments[currentPage]) {
-            initialPage = currentPage;
+        if (initialPage === -1 && prevInitialPage !== -1 && targetAttachments[prevInitialPage]) {
+            initialPage = prevInitialPage;
         }
 
         // If no matching attachment with the same index, dismiss the modal
-        if (initialPage === -1 && currentPage !== -1) {
+        if (initialPage === -1 && prevInitialPage !== -1) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);

From 8ef2085170f0558d846b856aa2f82ed422794549 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sat, 28 Sep 2024 20:46:35 +0700
Subject: [PATCH 12/27] refactor for native

---
 .../Attachments/AttachmentCarousel/index.native.tsx       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 7b6e4e15d389..cdddd3ee1333 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -41,15 +41,15 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         }
 
         let initialPage = targetAttachments.findIndex(compareImage);
-        const currentPage = attachments.findIndex(compareImage);
+        const prevInitialPage = attachments.findIndex(compareImage);
 
         // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
-        if (initialPage === -1 && currentPage !== -1 && targetAttachments[currentPage]) {
-            initialPage = currentPage;
+        if (initialPage === -1 && prevInitialPage !== -1 && targetAttachments[prevInitialPage]) {
+            initialPage = prevInitialPage;
         }
 
         // If no matching attachment with the same index, dismiss the modal
-        if (initialPage === -1 && currentPage !== -1) {
+        if (initialPage === -1 && prevInitialPage !== -1) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);

From ed960b161f734d587872e68be2a77c66ccee430e Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sun, 29 Sep 2024 20:40:13 +0700
Subject: [PATCH 13/27] remove unnecessary comment

---
 src/components/Attachments/AttachmentCarousel/index.native.tsx | 1 -
 src/components/Attachments/AttachmentCarousel/index.tsx        | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index cdddd3ee1333..e4808f4229b1 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -43,7 +43,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         let initialPage = targetAttachments.findIndex(compareImage);
         const prevInitialPage = attachments.findIndex(compareImage);
 
-        // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
         if (initialPage === -1 && prevInitialPage !== -1 && targetAttachments[prevInitialPage]) {
             initialPage = prevInitialPage;
         }
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 612aa179c25c..b6f11cd356a3 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -92,7 +92,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         let initialPage = targetAttachments.findIndex(compareImage);
         const prevInitialPage = attachments.findIndex(compareImage);
 
-        // If no matching attachment is found in targetAttachments but found in attachments, update initialPage
         if (initialPage === -1 && prevInitialPage !== -1 && targetAttachments[prevInitialPage]) {
             initialPage = prevInitialPage;
         }

From ca1e6d5e2f2d15c8ebaeac385e1e92c71cdc7f4f Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sun, 29 Sep 2024 21:12:46 +0700
Subject: [PATCH 14/27] access the array directly instead of checking -1 in
 index

---
 .../AttachmentCarousel/index.native.tsx        | 18 +++++++++---------
 .../Attachments/AttachmentCarousel/index.tsx   | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index e4808f4229b1..ac3ed3246b48 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -40,28 +40,28 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
         }
 
-        let initialPage = targetAttachments.findIndex(compareImage);
-        const prevInitialPage = attachments.findIndex(compareImage);
+        let attachmentIndex = targetAttachments.findIndex(compareImage);
+        const prevAttachmentIndex = attachments.findIndex(compareImage);
 
-        if (initialPage === -1 && prevInitialPage !== -1 && targetAttachments[prevInitialPage]) {
-            initialPage = prevInitialPage;
+        if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
+            attachmentIndex = prevAttachmentIndex;
         }
 
         // If no matching attachment with the same index, dismiss the modal
-        if (initialPage === -1 && prevInitialPage !== -1) {
+        if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
             Navigation.dismissModal();
         } else {
-            setPage(initialPage);
+            setPage(attachmentIndex);
             setAttachments(targetAttachments);
 
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
-                setDownloadButtonVisibility(initialPage !== -1);
+                setDownloadButtonVisibility(attachmentIndex !== -1);
             }
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (targetAttachments[initialPage] !== undefined && onNavigate) {
-                onNavigate(targetAttachments[initialPage]);
+            if (targetAttachments[attachmentIndex] !== undefined && onNavigate) {
+                onNavigate(targetAttachments[attachmentIndex]);
             }
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index b6f11cd356a3..a1cfc940e043 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -89,28 +89,28 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             return;
         }
 
-        let initialPage = targetAttachments.findIndex(compareImage);
-        const prevInitialPage = attachments.findIndex(compareImage);
+        let attachmentIndex = targetAttachments.findIndex(compareImage);
+        const prevAttachmentIndex = attachments.findIndex(compareImage);
 
-        if (initialPage === -1 && prevInitialPage !== -1 && targetAttachments[prevInitialPage]) {
-            initialPage = prevInitialPage;
+        if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
+            attachmentIndex = prevAttachmentIndex;
         }
 
         // If no matching attachment with the same index, dismiss the modal
-        if (initialPage === -1 && prevInitialPage !== -1) {
+        if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
             Navigation.dismissModal();
         } else {
-            setPage(initialPage);
+            setPage(attachmentIndex);
             setAttachments(targetAttachments);
 
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
-                setDownloadButtonVisibility(initialPage !== -1);
+                setDownloadButtonVisibility(attachmentIndex !== -1);
             }
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (targetAttachments[initialPage] !== undefined && onNavigate) {
-                onNavigate(targetAttachments[initialPage]);
+            if (targetAttachments[attachmentIndex] !== undefined && onNavigate) {
+                onNavigate(targetAttachments[attachmentIndex]);
             }
         }
     }, [report.privateNotes, reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate, accountID, type]);

From 4167773e39899df9193b465c8c8b65d319755275 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Sun, 29 Sep 2024 21:15:11 +0700
Subject: [PATCH 15/27] adjust comment position

---
 src/components/Attachments/AttachmentCarousel/index.native.tsx | 2 +-
 src/components/Attachments/AttachmentCarousel/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index ac3ed3246b48..f3384f717220 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -43,11 +43,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         let attachmentIndex = targetAttachments.findIndex(compareImage);
         const prevAttachmentIndex = attachments.findIndex(compareImage);
 
+        // If no matching attachment with the same index, dismiss the modal
         if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
             attachmentIndex = prevAttachmentIndex;
         }
 
-        // If no matching attachment with the same index, dismiss the modal
         if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
             Navigation.dismissModal();
         } else {
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index a1cfc940e043..e81d9c99475b 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -92,11 +92,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         let attachmentIndex = targetAttachments.findIndex(compareImage);
         const prevAttachmentIndex = attachments.findIndex(compareImage);
 
+        // If no matching attachment with the same index, dismiss the modal
         if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
             attachmentIndex = prevAttachmentIndex;
         }
 
-        // If no matching attachment with the same index, dismiss the modal
         if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
             Navigation.dismissModal();
         } else {

From 3e2e8d447d570ddfb983bf74d7184db74e655d15 Mon Sep 17 00:00:00 2001
From: Wildan M <muhliswildan@gmail.com>
Date: Mon, 30 Sep 2024 21:53:16 +0700
Subject: [PATCH 16/27] resolve issue incorrect newIndex on onPageSelected
 event

---
 .../Attachments/AttachmentCarousel/index.native.tsx         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index f3384f717220..095c768bd8ae 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -28,7 +28,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
     const [activeSource, setActiveSource] = useState<AttachmentSource>(source);
-
+    const [carouselPagerKey, setCarouselPagerKey] = useState(0);
     const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
 
     useEffect(() => {
@@ -46,6 +46,9 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         // If no matching attachment with the same index, dismiss the modal
         if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
             attachmentIndex = prevAttachmentIndex;
+            // we need to re-mount the pager to reset the carousel, 
+            // the newIndex on onPageSelected is not accurate
+            setCarouselPagerKey((prevKey) => prevKey + 1);
         }
 
         if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
@@ -135,6 +138,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                     />
 
                     <AttachmentCarouselPager
+                        key={carouselPagerKey}
                         items={attachments}
                         initialPage={page}
                         activeSource={activeSource}

From fbd028f7759b98820b924325090cdec28edabb16 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 30 Sep 2024 22:08:43 +0700
Subject: [PATCH 17/27] refine comment

---
 .../Attachments/AttachmentCarousel/index.native.tsx          | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 095c768bd8ae..c51ad8fdc77c 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -46,8 +46,9 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         // If no matching attachment with the same index, dismiss the modal
         if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
             attachmentIndex = prevAttachmentIndex;
-            // we need to re-mount the pager to reset the carousel, 
-            // the newIndex on onPageSelected is not accurate
+            // Re-mount the pager to reset the carousel.
+            // The newIndex from onPageSelected is inaccurate when attachments change dynamically.
+            // Related issue: https://github.com/callstack/react-native-pager-view/issues/597
             setCarouselPagerKey((prevKey) => prevKey + 1);
         }
 

From 9a844fab3eb7d8296659713e32c45433765b70d4 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 30 Sep 2024 22:12:13 +0700
Subject: [PATCH 18/27] refactor

---
 .../AttachmentCarousel/index.native.tsx       | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index c51ad8fdc77c..cbbdd2399f0c 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -33,39 +33,39 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
-        let targetAttachments: Attachment[] = [];
+        let newAttachments: Attachment[] = [];
         if (type === CONST.ATTACHMENT_TYPE.NOTE && accountID) {
-            targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
+            newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
         } else {
-            targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
+            newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
         }
 
-        let attachmentIndex = targetAttachments.findIndex(compareImage);
-        const prevAttachmentIndex = attachments.findIndex(compareImage);
+        let newIndex = newAttachments.findIndex(compareImage);
+        const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
-            attachmentIndex = prevAttachmentIndex;
+        if (!newAttachments[newIndex] && newAttachments[index]) {
+            newIndex = index;
             // Re-mount the pager to reset the carousel.
             // The newIndex from onPageSelected is inaccurate when attachments change dynamically.
             // Related issue: https://github.com/callstack/react-native-pager-view/issues/597
             setCarouselPagerKey((prevKey) => prevKey + 1);
         }
 
-        if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
+        if (!newAttachments[newIndex] && attachments[index]) {
             Navigation.dismissModal();
         } else {
-            setPage(attachmentIndex);
-            setAttachments(targetAttachments);
+            setPage(newIndex);
+            setAttachments(newAttachments);
 
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
-                setDownloadButtonVisibility(attachmentIndex !== -1);
+                setDownloadButtonVisibility(newIndex !== -1);
             }
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (targetAttachments[attachmentIndex] !== undefined && onNavigate) {
-                onNavigate(targetAttachments[attachmentIndex]);
+            if (newAttachments[newIndex] !== undefined && onNavigate) {
+                onNavigate(newAttachments[newIndex]);
             }
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

From 3c10da9eb61771a96cd387c8f289b3fc5087c4e7 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Mon, 30 Sep 2024 22:31:00 +0700
Subject: [PATCH 19/27] fix issue attachment briefly changed before dismiss

---
 .../AttachmentCarousel/index.native.tsx          | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index cbbdd2399f0c..51cb9def2edd 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -42,14 +42,13 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
 
         let newIndex = newAttachments.findIndex(compareImage);
         const index = attachments.findIndex(compareImage);
-
+        let shouldRemountPager = false;
         // If no matching attachment with the same index, dismiss the modal
         if (!newAttachments[newIndex] && newAttachments[index]) {
             newIndex = index;
-            // Re-mount the pager to reset the carousel.
-            // The newIndex from onPageSelected is inaccurate when attachments change dynamically.
-            // Related issue: https://github.com/callstack/react-native-pager-view/issues/597
-            setCarouselPagerKey((prevKey) => prevKey + 1);
+            // Set shouldRemountPager to true to avoid unnecessary remounting of the pager.
+            // We can't directly setCarouselPagerKey here since the attachment can briefly change if the modal should be dismissed.
+            shouldRemountPager = true;
         }
 
         if (!newAttachments[newIndex] && attachments[index]) {
@@ -58,6 +57,13 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             setPage(newIndex);
             setAttachments(newAttachments);
 
+            // Re-mount the pager to reset the carousel.
+            // The newIndex from onPageSelected is inaccurate when attachments change dynamically.
+            // Related issue: https://github.com/callstack/react-native-pager-view/issues/597
+            if (shouldRemountPager) {
+                setCarouselPagerKey((prevKey) => prevKey + 1);
+            }
+
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
                 setDownloadButtonVisibility(newIndex !== -1);

From 04d8e9f2999878d9671ec7e3d813fd18f23c3cf9 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Tue, 1 Oct 2024 08:45:54 +0700
Subject: [PATCH 20/27] Refactor

---
 .../Attachments/AttachmentCarousel/index.tsx  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index e81d9c99475b..f4f72196fbab 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -74,14 +74,14 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
 
     useEffect(() => {
         const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
-        let targetAttachments: Attachment[] = [];
+        let newAttachments: Attachment[] = [];
         if (type === CONST.ATTACHMENT_TYPE.NOTE && accountID) {
-            targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
+            newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
         } else {
-            targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions: reportActions ?? undefined});
+            newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions: reportActions ?? undefined});
         }
 
-        if (isEqual(attachments, targetAttachments)) {
+        if (isEqual(attachments, newAttachments)) {
             if (attachments.length === 0) {
                 setPage(-1);
                 setDownloadButtonVisibility?.(false);
@@ -89,28 +89,28 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             return;
         }
 
-        let attachmentIndex = targetAttachments.findIndex(compareImage);
-        const prevAttachmentIndex = attachments.findIndex(compareImage);
+        let newIndex = newAttachments.findIndex(compareImage);
+        const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
-            attachmentIndex = prevAttachmentIndex;
+        if (!newAttachments[newIndex] && newAttachments[index]) {
+            newIndex = index;
         }
 
-        if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
+        if (!newAttachments[newIndex] && attachments[index]) {
             Navigation.dismissModal();
         } else {
-            setPage(attachmentIndex);
-            setAttachments(targetAttachments);
+            setPage(newIndex);
+            setAttachments(newAttachments);
 
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
-                setDownloadButtonVisibility(attachmentIndex !== -1);
+                setDownloadButtonVisibility(newIndex !== -1);
             }
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (targetAttachments[attachmentIndex] !== undefined && onNavigate) {
-                onNavigate(targetAttachments[attachmentIndex]);
+            if (newAttachments[newIndex] !== undefined && onNavigate) {
+                onNavigate(newAttachments[newIndex]);
             }
         }
     }, [report.privateNotes, reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate, accountID, type]);

From d76d54dff04271cbe4571b8af9a12c29bcb9af71 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 2 Oct 2024 09:04:43 +0700
Subject: [PATCH 21/27] revert pager key solution

---
 .../Attachments/AttachmentCarousel/index.native.tsx  | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index d10966915ed2..d0a78f5a41be 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -28,7 +28,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
     const [activeSource, setActiveSource] = useState<AttachmentSource>(source);
-    const [carouselPagerKey, setCarouselPagerKey] = useState(0);
     const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);
 
     useEffect(() => {
@@ -46,9 +45,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         // If no matching attachment with the same index, dismiss the modal
         if (!newAttachments[newIndex] && newAttachments[index]) {
             newIndex = index;
-            // Set shouldRemountPager to true to avoid unnecessary remounting of the pager.
-            // We can't directly setCarouselPagerKey here since the attachment can briefly change if the modal should be dismissed.
-            shouldRemountPager = true;
         }
 
         if (!newAttachments[newIndex] && attachments[index]) {
@@ -57,13 +53,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             setPage(newIndex);
             setAttachments(newAttachments);
 
-            // Re-mount the pager to reset the carousel.
-            // The newIndex from onPageSelected is inaccurate when attachments change dynamically.
-            // Related issue: https://github.com/callstack/react-native-pager-view/issues/597
-            if (shouldRemountPager) {
-                setCarouselPagerKey((prevKey) => prevKey + 1);
-            }
-
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
                 setDownloadButtonVisibility(newIndex !== -1);
@@ -149,7 +138,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                     />
 
                     <AttachmentCarouselPager
-                        key={carouselPagerKey}
                         items={attachments}
                         initialPage={page}
                         activeSource={activeSource}

From aebb27fcd2c6baee1704ca53ea6b874c0e8be913 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 2 Oct 2024 09:08:38 +0700
Subject: [PATCH 22/27] fix lint

---
 .../Attachments/AttachmentCarousel/index.native.tsx        | 7 +++----
 src/components/Attachments/AttachmentCarousel/index.tsx    | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index d0a78f5a41be..22d82b769451 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -41,13 +41,13 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
 
         let newIndex = newAttachments.findIndex(compareImage);
         const index = attachments.findIndex(compareImage);
-        let shouldRemountPager = false;
+
         // If no matching attachment with the same index, dismiss the modal
-        if (!newAttachments[newIndex] && newAttachments[index]) {
+        if (!newAttachments.at(newIndex) && newAttachments[index]) {
             newIndex = index;
         }
 
-        if (!newAttachments[newIndex] && attachments[index]) {
+        if (!newAttachments.at(newIndex) && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);
@@ -59,7 +59,6 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             }
 
             const attachment = newAttachments.at(newIndex);
-
             // Update the parent modal's state with the source and name from the mapped attachments
             if (newIndex !== -1 && attachment !== undefined && onNavigate) {
                 onNavigate(attachment);
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 39d93548dd27..8a810bb920d3 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -93,11 +93,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!newAttachments[newIndex] && newAttachments[index]) {
+        if (!newAttachments.at(newIndex) && newAttachments[index]) {
             newIndex = index;
         }
 
-        if (!newAttachments[newIndex] && attachments[index]) {
+        if (!newAttachments.at(newIndex) && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);

From 8e34c56cf8d022a3d716c7ce3dab8e37812e0c74 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 2 Oct 2024 09:09:30 +0700
Subject: [PATCH 23/27] fix lint

---
 src/components/Attachments/AttachmentCarousel/index.native.tsx | 2 +-
 src/components/Attachments/AttachmentCarousel/index.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 22d82b769451..2d05e6c09079 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -43,7 +43,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!newAttachments.at(newIndex) && newAttachments[index]) {
+        if (!newAttachments.at(newIndex) && newAttachments.at(index)) {
             newIndex = index;
         }
 
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 8a810bb920d3..cb6638e21f77 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -93,7 +93,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!newAttachments.at(newIndex) && newAttachments[index]) {
+        if (!newAttachments.at(newIndex) && newAttachments.at(index)) {
             newIndex = index;
         }
 

From 7bb7bb2981ffa773f532bb6725d899e024d63b32 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 2 Oct 2024 09:50:08 +0700
Subject: [PATCH 24/27] revert compare with -1 after new eslint rule

---
 .../Attachments/AttachmentCarousel/index.native.tsx           | 4 ++--
 src/components/Attachments/AttachmentCarousel/index.tsx       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 2d05e6c09079..5edb4c3c8f64 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -43,11 +43,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!newAttachments.at(newIndex) && newAttachments.at(index)) {
+        if (newIndex === -1 && newAttachments.at(index)) {
             newIndex = index;
         }
 
-        if (!newAttachments.at(newIndex) && attachments.at(index)) {
+        if (newIndex === -1 && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index cb6638e21f77..cba586deeefd 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -93,11 +93,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (!newAttachments.at(newIndex) && newAttachments.at(index)) {
+        if (newIndex === -1 && newAttachments.at(index)) {
             newIndex = index;
         }
 
-        if (!newAttachments.at(newIndex) && attachments.at(index)) {
+        if (newIndex === -1 && attachments.find(compareImage)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);

From eb3370748d1bf003dd8ab5ffad469d802d589718 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 2 Oct 2024 09:58:48 +0700
Subject: [PATCH 25/27] sync web code with native

---
 src/components/Attachments/AttachmentCarousel/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index cba586deeefd..8a4542d25fb4 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -97,7 +97,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             newIndex = index;
         }
 
-        if (newIndex === -1 && attachments.find(compareImage)) {
+        if (newIndex === -1 && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);

From 2f7068adb2072ce53d91a3505d9bc5d4ad381f67 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Wed, 2 Oct 2024 22:08:14 +0700
Subject: [PATCH 26/27] -1 check for array access using .at

---
 .../Attachments/AttachmentCarousel/index.native.tsx           | 4 ++--
 src/components/Attachments/AttachmentCarousel/index.tsx       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 5edb4c3c8f64..754dcce6c73e 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -43,11 +43,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (newIndex === -1 && newAttachments.at(index)) {
+        if (newIndex === -1 && index !== -1 && newAttachments.at(index)) {
             newIndex = index;
         }
 
-        if (newIndex === -1 && attachments.at(index)) {
+        if (newIndex === -1 && index !== -1 && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 8a4542d25fb4..1672f5a4dfdb 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -93,11 +93,11 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         const index = attachments.findIndex(compareImage);
 
         // If no matching attachment with the same index, dismiss the modal
-        if (newIndex === -1 && newAttachments.at(index)) {
+        if (newIndex === -1 && index !== -1 && newAttachments.at(index)) {
             newIndex = index;
         }
 
-        if (newIndex === -1 && attachments.at(index)) {
+        if (newIndex === -1 && index !== -1 && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
             setPage(newIndex);

From 33cd21227f2cbd7e8d4e3a203921898abe64eda2 Mon Sep 17 00:00:00 2001
From: Wildan Muhlis <muhliswildan@gmail.com>
Date: Thu, 3 Oct 2024 08:56:54 +0700
Subject: [PATCH 27/27] Refine comment, add why point

---
 .../Attachments/AttachmentCarousel/index.native.tsx          | 5 ++++-
 src/components/Attachments/AttachmentCarousel/index.tsx      | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.native.tsx b/src/components/Attachments/AttachmentCarousel/index.native.tsx
index 754dcce6c73e..a8eb614202a7 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.native.tsx
@@ -42,11 +42,14 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         let newIndex = newAttachments.findIndex(compareImage);
         const index = attachments.findIndex(compareImage);
 
-        // If no matching attachment with the same index, dismiss the modal
+        // If newAttachments includes an attachment with the same index, update newIndex to that index.
+        // Previously, uploading an attachment offline would dismiss the modal when the image was previewed and the connection was restored.
+        // Now, instead of dismissing the modal, we replace it with the new attachment that has the same index.
         if (newIndex === -1 && index !== -1 && newAttachments.at(index)) {
             newIndex = index;
         }
 
+        // If no matching attachment with the same index, dismiss the modal
         if (newIndex === -1 && index !== -1 && attachments.at(index)) {
             Navigation.dismissModal();
         } else {
diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx
index 1672f5a4dfdb..a1408aaf400e 100644
--- a/src/components/Attachments/AttachmentCarousel/index.tsx
+++ b/src/components/Attachments/AttachmentCarousel/index.tsx
@@ -92,11 +92,14 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
         let newIndex = newAttachments.findIndex(compareImage);
         const index = attachments.findIndex(compareImage);
 
-        // If no matching attachment with the same index, dismiss the modal
+        // If newAttachments includes an attachment with the same index, update newIndex to that index.
+        // Previously, uploading an attachment offline would dismiss the modal when the image was previewed and the connection was restored.
+        // Now, instead of dismissing the modal, we replace it with the new attachment that has the same index.
         if (newIndex === -1 && index !== -1 && newAttachments.at(index)) {
             newIndex = index;
         }
 
+        // If no matching attachment with the same index, dismiss the modal
         if (newIndex === -1 && index !== -1 && attachments.at(index)) {
             Navigation.dismissModal();
         } else {