From 868936b1aceb873caad6c77ce48778b1008a0f1b Mon Sep 17 00:00:00 2001
From: mdaamir151 <mdaamir151@gmail.com>
Date: Thu, 2 Jan 2025 13:41:06 +0530
Subject: [PATCH] fix(modal): Hide modal through onDismiss callback

**Current behavior**: When user presses outside of modal, it gets dismissed internally regardless of whether app logic wants to close the modal and then user provided callback is invoked. This results in flicker - internal close and then immediate open due to `visible` state still `true` on modal if the app logic doesn't dismiss the modal immediately. Flicker is also caused if there are frame delays between user callback being invoked and `visible` state being set

**New Behavior**: Initiate dismiss modal only when app logic sets `visible` state to false

**Steps to reproduce bug**: Pass empty function as `onDismiss` callback and press outside of modal - modal flickers
---
 src/components/Modal.tsx                |  4 ++--
 src/components/__tests__/Modal.test.tsx | 23 -----------------------
 2 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 313ecee43b..0ba50f6e8f 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -206,14 +206,14 @@ function Modal({
       accessibilityViewIsModal
       accessibilityLiveRegion="polite"
       style={StyleSheet.absoluteFill}
-      onAccessibilityEscape={hideModal}
+      onAccessibilityEscape={onDismissCallback}
       testID={testID}
     >
       <AnimatedPressable
         accessibilityLabel={overlayAccessibilityLabel}
         accessibilityRole="button"
         disabled={!dismissable}
-        onPress={dismissable ? hideModal : undefined}
+        onPress={dismissable ? onDismissCallback : undefined}
         importantForAccessibility="no"
         style={[
           styles.backdrop,
diff --git a/src/components/__tests__/Modal.test.tsx b/src/components/__tests__/Modal.test.tsx
index 68f8627283..29a6ab113c 100644
--- a/src/components/__tests__/Modal.test.tsx
+++ b/src/components/__tests__/Modal.test.tsx
@@ -130,29 +130,6 @@ describe('Modal', () => {
           opacity: 1,
         });
       });
-
-      it('should invoke the onDismiss function after the animation', () => {
-        const onDismiss = jest.fn();
-        const { getByTestId } = render(
-          <Modal testID="modal" visible onDismiss={onDismiss}>
-            {null}
-          </Modal>
-        );
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          fireEvent.press(getByTestId('modal-backdrop'));
-        });
-
-        expect(onDismiss).not.toHaveBeenCalled();
-
-        act(() => {
-          jest.runAllTimers();
-        });
-
-        expect(onDismiss).toHaveBeenCalledTimes(1);
-      });
     });
 
     describe('if closed via Android back button', () => {