feat(modal): dismiss only the topmost overlay on back or escape

Author: Konstantin Marushchak

src/components/Modal.tsx

@@ -15,8 +15,7 @@ import type { Props as SurfaceProps, SurfaceStyle } from './Surface';
 import { useInternalTheme } from '../core/theming';
 import { tokens } from '../theme/tokens';
 import type { Elevation, ThemeProp } from '../theme/types';
-import { addEventListener } from '../utils/addEventListener';
-import { BackHandler } from '../utils/BackHandler/BackHandler';
+import { useOverlayDismiss } from '../utils/useOverlayDismiss';
 
 const scrimAlpha = tokens.md.sys.scrim.alpha;
 
@@ -175,27 +174,11 @@ function Modal({
     return () => clearTimeout(timeout);
   }, [scale, visible, visibleInternal]);
 
-  React.useEffect(() => {
-    if (!visible) {
-      return undefined;
-    }
-
-    const onHardwareBackPress = () => {
-      if (dismissable || dismissableBackButton) {
-        onDismissCallback();
-      }
-
-      return true;
-    };
-
-    const subscription = addEventListener(
-      BackHandler,
-      'hardwareBackPress',
-      onHardwareBackPress
-    );
-
-    return () => subscription.remove();
-  }, [dismissable, dismissableBackButton, onDismissCallback, visible]);
+  useOverlayDismiss({
+    enabled: visible,
+    dismissable: dismissableBackButton,
+    onDismiss: onDismissCallback,
+  });
 
   const transitionTimingFunction = cubicBezier(1 / 3, 1, 2 / 3, 1);
 

src/components/__tests__/Modal.test.tsx

@@ -1,7 +1,15 @@
 import { BackHandler as RNBackHandler, Text } from 'react-native';
 import type { BackHandlerStatic as RNBackHandlerStatic } from 'react-native';
 
-import { afterAll, beforeAll, describe, expect, it, jest } from '@jest/globals';
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
 import { act, userEvent } from '@testing-library/react-native';
 
 import { render, screen } from '../../test-utils';
@@ -18,6 +26,7 @@ jest.mock('react-native-safe-area-context', () => ({
 
 interface BackHandlerStatic extends RNBackHandlerStatic {
   mockPressBack(): void;
+  exitApp: jest.Mock<() => void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
@@ -40,6 +49,12 @@ describe('Modal', () => {
     /* eslint-enable @typescript-eslint/no-unsafe-type-assertion */
   });
 
+  // `exitApp` is one module-level `jest.fn` shared by every test in the file,
+  // and nothing clears it globally.
+  beforeEach(() => {
+    BackHandler.exitApp.mockClear();
+  });
+
   describe('by default', () => {
     it('should render passed children', async () => {
       await render(
@@ -331,6 +346,27 @@ describe('Modal', () => {
 
         expect(onDismiss).not.toHaveBeenCalled();
       });
+
+      it('should not let the press leave the screen behind it', async () => {
+        await render(
+          <Portal.Host>
+            <Modal
+              testID="modal"
+              visible
+              onDismiss={() => {}}
+              dismissable={false}
+            >
+              {null}
+            </Modal>
+          </Portal.Host>
+        );
+
+        await act(() => {
+          BackHandler.mockPressBack();
+        });
+
+        expect(BackHandler.exitApp).not.toHaveBeenCalled();
+      });
     });
   });