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

Summary:
Pull Request resolved: facebook#56474

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

Reviewed By: alanleedev

Differential Revision: D101178179

fbshipit-source-id: c2100d2cc494c326d8a91caa906faabb3d23381c

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,8 +23,28 @@ type Props = Readonly<{
   isDisabled?: ?boolean,
 }>;
 
-export function _LogBoxNotificationContainer(props: Props): React.Node {
+function useLogBoxBackHandler(focused: boolean, logCount: number): void {
+  React.useEffect(() => {
+    if (!focused || logCount === 0) {
+      return;
+    }
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        LogBoxData.clearWarnings();
+        LogBoxData.clearErrors();
+        return true;
+      },
+    );
+    return () => subscription.remove();
+  }, [focused, logCount]);
+}
+
+export function LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
+  const [focused, setFocused] = React.useState(false);
+
+  useLogBoxBackHandler(focused, logs.length);
 
   const onDismissWarns = () => {
     LogBoxData.clearWarnings();
@@ -68,6 +89,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
             totalLogCount={warnings.length}
             onPressOpen={() => openLog(warnings[warnings.length - 1])}
             onPressDismiss={onDismissWarns}
+            onFocusChange={setFocused}
           />
         </View>
       )}
@@ -79,6 +101,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
             totalLogCount={errors.length}
             onPressOpen={() => openLog(errors[errors.length - 1])}
             onPressDismiss={onDismissErrors}
+            onFocusChange={setFocused}
           />
         </View>
       )}
@@ -101,5 +124,5 @@ const styles = StyleSheet.create({
 });
 
 export default LogBoxData.withSubscription(
-  _LogBoxNotificationContainer,
+  LogBoxNotificationContainer,
 ) as React.ComponentType<{}>;

packages/react-native/Libraries/LogBox/UI/LogBoxButton.js

@@ -12,7 +12,7 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
-import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
+import Pressable from '../../Components/Pressable/Pressable';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
@@ -28,9 +28,10 @@ component LogBoxButton(
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
   onPress?: ?(event: GestureResponderEvent) => void,
+  onFocusChange?: ?(focused: boolean) => void,
   style?: ViewStyleProp,
 ) {
-  const [pressed, setPressed] = useState(false);
+  const [focused, setFocused] = useState(false);
 
   let resolvedBackgroundColor = backgroundColor;
   if (!resolvedBackgroundColor) {
@@ -40,32 +41,54 @@ component LogBoxButton(
     };
   }
 
-  const content = (
-    <View
-      id={id}
-      style={StyleSheet.compose(
-        {
-          backgroundColor: pressed
-            ? resolvedBackgroundColor.pressed
-            : resolvedBackgroundColor.default,
-        },
-        style,
-      )}>
-      {children}
-    </View>
-  );
+  if (onPress == null) {
+    return (
+      <View
+        id={id}
+        style={StyleSheet.compose(
+          {backgroundColor: resolvedBackgroundColor.default},
+          style,
+        )}>
+        {children}
+      </View>
+    );
+  }
 
-  return onPress == null ? (
-    content
-  ) : (
-    <TouchableWithoutFeedback
+  return (
+    <Pressable
+      id={id}
+      focusable={true}
       hitSlop={hitSlop}
       onPress={onPress}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}>
-      {content}
-    </TouchableWithoutFeedback>
+      onFocus={() => {
+        setFocused(true);
+        onFocusChange?.(true);
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onFocusChange?.(false);
+      }}
+      style={({pressed}) =>
+        StyleSheet.compose(
+          {
+            backgroundColor: pressed
+              ? resolvedBackgroundColor.pressed
+              : resolvedBackgroundColor.default,
+          },
+          focused ? StyleSheet.compose(style, styles.focusRing) : style,
+        )
+      }>
+      {children}
+    </Pressable>
   );
 }
 
+const styles = StyleSheet.create({
+  focusRing: {
+    borderWidth: 2,
+    borderColor: LogBoxStyle.getTextColor(0.6),
+    borderRadius: 4,
+  },
+});
+
 export default LogBoxButton;

packages/react-native/Libraries/LogBox/UI/LogBoxInspector.js

@@ -57,6 +57,9 @@ export default function LogBoxInspector(props: Props): React.Node {
   }, []);
 
   useEffect(() => {
+    if (log == null) {
+      return;
+    }
     const subscription = BackHandler.addEventListener(
       'hardwareBackPress',
       () => {
@@ -65,7 +68,7 @@ export default function LogBoxInspector(props: Props): React.Node {
       },
     );
     return () => subscription.remove();
-  }, [onMinimize]);
+  }, [log, onMinimize]);
 
   function _handleRetry() {
     LogBoxData.retrySymbolicateLogNow(log);

packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,6 +19,8 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
+const noop = () => {};
+
 component LogBoxInspectorStackFrame(
   frame: StackFrame,
   onPress?: ?(event: GestureResponderEvent) => void,
@@ -38,7 +40,7 @@ component LogBoxInspectorStackFrame(
           default: 'transparent',
           pressed: onPress ? LogBoxStyle.getBackgroundColor(1) : 'transparent',
         }}
-        onPress={onPress}
+        onPress={onPress ?? noop}
         style={styles.frame}>
         <Text
           id="logbox_stack_frame_text"

packages/react-native/Libraries/LogBox/UI/LogBoxNotification.js

@@ -26,6 +26,7 @@ type Props = Readonly<{
   level: 'warn' | 'error',
   onPressOpen: () => void,
   onPressDismiss: () => void,
+  onFocusChange?: ?(focused: boolean) => void,
 }>;
 
 export default function LogBoxNotification(props: Props): React.Node {
@@ -41,6 +42,7 @@ export default function LogBoxNotification(props: Props): React.Node {
       <LogBoxButton
         id={`logbox_open_button_${level}`}
         onPress={props.onPressOpen}
+        onFocusChange={props.onFocusChange}
         style={styles.press}
         backgroundColor={{
           default: LogBoxStyle.getBackgroundColor(1),

packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxButton-test.js

@@ -14,11 +14,11 @@ const LogBoxButton = require('../LogBoxButton').default;
 const render = require('@react-native/jest-preset/jest/renderer');
 const React = require('react');
 
-// Mock `TouchableWithoutFeedback` because we are interested in snapshotting the
-// behavior of `LogBoxButton`, not `TouchableWithoutFeedback`.
-jest.mock('../../../Components/Touchable/TouchableWithoutFeedback', () => ({
+// Mock `Pressable` because we are interested in snapshotting the
+// behavior of `LogBoxButton`, not `Pressable`.
+jest.mock('../../../Components/Pressable/Pressable', () => ({
   __esModule: true,
-  default: 'TouchableWithoutFeedback',
+  default: 'Pressable',
 }));
 
 describe('LogBoxButton', () => {
@@ -36,7 +36,7 @@ describe('LogBoxButton', () => {
     expect(output).toMatchSnapshot();
   });
 
-  it('should render TouchableWithoutFeedback and pass through props', async () => {
+  it('should render Pressable and pass through props', async () => {
     const output = await render.create(
       <LogBoxButton
         backgroundColor={{

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxButton-test.js.snap

@@ -1,24 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LogBoxButton should render TouchableWithoutFeedback and pass through props 1`] = `
-<TouchableWithoutFeedback
+exports[`LogBoxButton should render Pressable and pass through props 1`] = `
+<Pressable
+  focusable={true}
   hitSlop={Object {}}
+  onBlur={[Function]}
+  onFocus={[Function]}
   onPress={[Function]}
-  onPressIn={[Function]}
-  onPressOut={[Function]}
+  style={[Function]}
 >
-  <View
-    style={
-      Object {
-        "backgroundColor": "black",
-      }
-    }
-  >
-    <Text>
-      Press me
-    </Text>
-  </View>
-</TouchableWithoutFeedback>
+  <Text>
+    Press me
+  </Text>
+</Pressable>
 `;
 
 exports[`LogBoxButton should render only a view without an onPress 1`] = `

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrame-test.js.snap

@@ -156,6 +156,7 @@ exports[`LogBoxInspectorStackFrame should render stack frame without press feedb
         "pressed": "transparent",
       }
     }
+    onPress={[Function]}
     style={
       Object {
         "borderRadius": 5,

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorStackFrames-test.js.snap

@@ -78,6 +78,35 @@ exports[`LogBoxInspectorStackFrames should render stack frames with 1 frame coll
       }
     >
       <View
+        accessibilityState={
+          Object {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Array [
             Object {
@@ -149,9 +178,20 @@ exports[`LogBoxInspectorStackFrames should render stack frames with 1 frame coll
             "selected": undefined,
           }
         }
+        accessibilityValue={
+          Object {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
         accessible={true}
+        collapsable={false}
         focusable={true}
+        onBlur={[Function]}
         onClick={[Function]}
+        onFocus={[Function]}
         onResponderGrant={[Function]}
         onResponderMove={[Function]}
         onResponderRelease={[Function]}