Add BackHandler to dismiss LogBox toasts on back press (#56474)

Summary:

On Android, pressing the hardware back button while LogBox notification toasts or the full inspector overlay are visible has no effect on the JS side. The only way to dismiss notifications is the on-screen X button, and the only way to close the inspector is via Minimize/Dismiss.

This adds `BackHandler` listeners to both JS containers:

**Notification toasts**: A new `LogBoxNotificationBackHandler` component mounts alongside the toasts and registers a `hardwareBackPress` listener that calls `clearWarnings()` + `clearErrors()`, equivalent to pressing X on every visible toast. The component returns null and auto-cleans the listener on unmount.

**Inspector overlay**: `LogBoxInspectorContainer` registers a `hardwareBackPress` listener in `componentDidMount` that calls `_handleMinimize()` (`setSelectedLog(-1)`), closing the overlay non-destructively — same as pressing the Minimize button.

Changelog: [Android][Added] - Allow LogBox notification toasts and inspector overlay to be dismissed via Android back button

Differential Revision: D101178179

Author: Abbondanzo

packages/react-native/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -12,6 +12,7 @@ import type LogBoxLog from './Data/LogBoxLog';
 
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import BackHandler from '../Utilities/BackHandler';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
@@ -23,6 +24,27 @@ type Props = Readonly<{
 }>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
+  _backHandler: ?{remove: () => void, ...} = null;
+
+  componentDidMount() {
+    this._backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (this.props.selectedLogIndex < 0) {
+          return false;
+        }
+        this._handleMinimize();
+        return true;
+      },
+    );
+  }
+
+  componentWillUnmount() {
+    if (this._backHandler) {
+      this._backHandler.remove();
+    }
+  }
+
   render(): React.Node {
     return (
       <View style={StyleSheet.absoluteFill}>

packages/react-native/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -11,6 +11,7 @@
 import SafeAreaView from '../../src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE';
 import View from '../Components/View/View';
 import StyleSheet from '../StyleSheet/StyleSheet';
+import BackHandler from '../Utilities/BackHandler';
 import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
@@ -22,6 +23,31 @@ type Props = Readonly<{
   isDisabled?: ?boolean,
 }>;
 
+function LogBoxNotificationBackHandler({
+  logs,
+}: {
+  logs: ReadonlyArray<LogBoxLog>,
+}): React.Node {
+  const logsRef = React.useRef(logs);
+  logsRef.current = logs;
+
+  React.useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        if (logsRef.current.length === 0) {
+          return false;
+        }
+        LogBoxData.clearWarnings();
+        LogBoxData.clearErrors();
+        return true;
+      },
+    );
+    return () => subscription.remove();
+  }, []);
+  return null;
+}
+
 export function _LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
 
@@ -60,6 +86,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
   );
   return (
     <SafeAreaView style={styles.list}>
+      <LogBoxNotificationBackHandler logs={logs} />
       {warnings.length > 0 && (
         <View style={styles.toast}>
           <LogBoxLogNotification

packages/react-native/Libraries/LogBox/__tests__/LogBoxInspectorContainer-test.js

@@ -10,56 +10,40 @@
 
 'use strict';
 
+const BackHandler = require('../../Utilities/BackHandler').default;
+const LogBoxData = require('../Data/LogBoxData');
 const LogBoxLog = require('../Data/LogBoxLog').default;
 const {
-  _LogBoxNotificationContainer: LogBoxNotificationContainer,
-} = require('../LogBoxNotificationContainer');
+  _LogBoxInspectorContainer: LogBoxInspectorContainer,
+} = require('../LogBoxInspectorContainer');
 const render = require('@react-native/jest-preset/jest/renderer');
 const React = require('react');
 
-// Mock `LogBoxLogNotification` because we are interested in snapshotting the
-// behavior of `LogBoxNotificationContainer`, not `LogBoxLogNotification`.
-jest.mock('../UI/LogBoxNotification', () => ({
+// Mock `LogBoxInspector` because we are interested in snapshotting the behavior
+// of `LogBoxInspectorContainer`, not `LogBoxInspector`.
+jest.mock('../UI/LogBoxInspector', () => ({
   __esModule: true,
-  default: 'LogBoxLogNotification',
+  default: 'LogBoxInspector',
 }));
 
-describe('LogBoxNotificationContainer', () => {
-  it('should render null with no logs', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer selectedLogIndex={-1} logs={[]} />,
-    );
-
-    expect(output).toMatchSnapshot();
-  });
+jest.mock('../../Utilities/BackHandler', () =>
+  require('../../Utilities/__mocks__/BackHandler'),
+);
 
-  it('should render null with no selected log and disabled', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer
-        isDisabled
-        selectedLogIndex={-1}
-        logs={[
-          new LogBoxLog({
-            level: 'warn',
-            isComponentError: false,
-            message: {
-              content: 'Some kind of message',
-              substitutions: [],
-            },
-            stack: [],
-            category: 'Some kind of message',
-            componentStack: [],
-          }),
-        ]}
-      />,
-    );
+describe('LogBoxInspectorContainer', () => {
+  let output;
 
-    expect(output).toMatchSnapshot();
+  afterEach(async () => {
+    if (output) {
+      await render.unmount(output);
+      output = null;
+    }
   });
 
-  it('should render the latest warning notification', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer
+  it('should render inspector with logs, even when disabled', async () => {
+    output = await render.create(
+      <LogBoxInspectorContainer
+        isDisabled
         selectedLogIndex={-1}
         logs={[
           new LogBoxLog({
@@ -74,7 +58,7 @@ describe('LogBoxNotificationContainer', () => {
             componentStack: [],
           }),
           new LogBoxLog({
-            level: 'warn',
+            level: 'error',
             isComponentError: false,
             message: {
               content: 'Some kind of message (latest)',
@@ -91,13 +75,15 @@ describe('LogBoxNotificationContainer', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render the latest error notification', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer
-        selectedLogIndex={-1}
+  it('should minimize inspector on back press when a log is selected', async () => {
+    const spy = jest.spyOn(LogBoxData, 'setSelectedLog');
+
+    output = await render.create(
+      <LogBoxInspectorContainer
+        selectedLogIndex={0}
         logs={[
           new LogBoxLog({
-            level: 'error',
+            level: 'warn',
             isComponentError: false,
             message: {
               content: 'Some kind of message',
@@ -107,27 +93,23 @@ describe('LogBoxNotificationContainer', () => {
             category: 'Some kind of message',
             componentStack: [],
           }),
-          new LogBoxLog({
-            level: 'error',
-            isComponentError: false,
-            message: {
-              content: 'Some kind of message (latest)',
-              substitutions: [],
-            },
-            stack: [],
-            category: 'Some kind of message (latest)',
-            componentStack: [],
-          }),
         ]}
       />,
     );
 
-    expect(output).toMatchSnapshot();
+    BackHandler.mockPressBack();
+
+    expect(spy).toHaveBeenCalledWith(-1);
+    expect(BackHandler.exitApp).not.toHaveBeenCalled();
+
+    spy.mockRestore();
   });
 
-  it('should render both an error and warning notification', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer
+  it('should not intercept back press when no log is selected', async () => {
+    const spy = jest.spyOn(LogBoxData, 'setSelectedLog');
+
+    output = await render.create(
+      <LogBoxInspectorContainer
         selectedLogIndex={-1}
         logs={[
           new LogBoxLog({
@@ -141,35 +123,29 @@ describe('LogBoxNotificationContainer', () => {
             category: 'Some kind of message',
             componentStack: [],
           }),
-          new LogBoxLog({
-            level: 'error',
-            isComponentError: false,
-            message: {
-              content: 'Some kind of message (latest)',
-              substitutions: [],
-            },
-            stack: [],
-            category: 'Some kind of message (latest)',
-            componentStack: [],
-          }),
         ]}
       />,
     );
 
-    expect(output).toMatchSnapshot();
+    BackHandler.mockPressBack();
+
+    expect(spy).not.toHaveBeenCalled();
+
+    spy.mockRestore();
   });
 
-  it('should render selected fatal error even when disabled', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer
-        isDisabled
+  it('should remove back handler on unmount', async () => {
+    const spy = jest.spyOn(LogBoxData, 'setSelectedLog');
+
+    output = await render.create(
+      <LogBoxInspectorContainer
         selectedLogIndex={0}
         logs={[
           new LogBoxLog({
-            level: 'fatal',
+            level: 'warn',
             isComponentError: false,
             message: {
-              content: 'Should be selected',
+              content: 'Some kind of message',
               substitutions: [],
             },
             stack: [],
@@ -180,39 +156,13 @@ describe('LogBoxNotificationContainer', () => {
       />,
     );
 
-    expect(output).toMatchSnapshot();
-  });
+    await render.unmount(output);
+    output = null;
 
-  it('should render selected syntax error even when disabled', async () => {
-    const output = await render.create(
-      <LogBoxNotificationContainer
-        isDisabled
-        selectedLogIndex={0}
-        logs={[
-          new LogBoxLog({
-            level: 'syntax',
-            isComponentError: false,
-            message: {
-              content: 'Should be selected',
-              substitutions: [],
-            },
-            stack: [],
-            category: 'Some kind of syntax error message',
-            componentStack: [],
-            codeFrame: {
-              fileName: '/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',
-              location: {row: 199, column: 0},
-              content: `  197 | });
-  198 |
-> 199 | export default CrashReactApp;
-      | ^
-  200 |`,
-            },
-          }),
-        ]}
-      />,
-    );
+    BackHandler.mockPressBack();
 
-    expect(output).toMatchSnapshot();
+    expect(spy).not.toHaveBeenCalled();
+
+    spy.mockRestore();
   });
 });