Stop remounting the app when toggling Touchables in the Element Inspector (#58705)

Summary:
Pressing **Touchables** in the Element Inspector remounts the whole app. All component state is lost, including navigation state, so the app jumps back to its first screen, away from the screen whose press targets you wanted to see. While Inspect is on, touches are intercepted, so you can't navigate back either.

The remount is how the toggle is applied. `PressabilityDebug` keeps the flag in a module variable that React can't observe, so `Inspector` asks `AppContainer` to change the `key` of the root view:

```js
const setTouchTargeting = (val: boolean) => {
  PressabilityDebug.setEnabled(val);
  onRequestRerenderApp(); // AppContainer: setKey(k => k + 1)
};
```

This has been in place since d5c1de7 (2016). The only related report I found, #26354, was closed with a workaround.

This change:

- makes `PressabilityDebug` notify subscribers when the flag changes, and adds `useIsEnabled()`, which reads it with `useSyncExternalStore`
- uses it in `PressabilityDebugView`, which `Pressable` and every `Touchable*` already render in `__DEV__`, so those components don't change
- moves the magenta color of pressable `Text` into `PressableText` / `PressableVirtualText`, so `Text` that isn't pressable gets no extra hook
- uses it in the Inspector panel for the state of the Touchables button
- removes `onRequestRerenderApp`, and the root `key` in `AppContainer` that only existed for it

In production `useIsEnabled` is `isEnabled`, so no hooks are added. No public API changes.

One difference: `Text` with both `onPress` and `disabled` no longer turns magenta, since it isn't pressable.

## Changelog:

[GENERAL] [FIXED] - Toggling Touchables in the Element Inspector no longer remounts the app and resets its state

Pull Request resolved: #58705

Test Plan:
| Before | After |
| --- | --- |
| <video src="https://github.com/user-attachments/assets/bb8b819b-256d-4ecf-9504-da974af3ad31" width="260"></video> | <video src="https://github.com/user-attachments/assets/23048e00-e252-467b-85d6-9503cfd10e56" width="260"></video> |

Before, the app remounts and goes back to its first screen. After, it stays on the screen and the press targets are outlined. Recorded in an Expo SDK 57 app (React Native 0.86.3, New Architecture) with this change applied as a patch: open a screen other than the first one, then Dev Menu → Toggle Element Inspector → **Touchables**.

The new Fantom test `PressabilityDebug-itest.js` checks that the press target outline appears and disappears without remounting, that pressable `Text` (top-level and nested) turns magenta, and that disabled `Text` does not. All four tests fail without this change.

- `yarn fantom PressabilityDebug-itest` → 4 passed
- `yarn fantom` → 182 suites passed, 22 skipped, 0 failed
- `yarn test packages/react-native` → 146 suites, 5232 tests passed
- `yarn flow-check` → 0 errors
- `yarn lint`, `yarn format-check-javascript` → clean
- `yarn build-types` → `ReactNativeApi.d.ts` unchanged

Reviewed By: javache

Differential Revision: D122144366

Pulled By: fabriziocucci

fbshipit-source-id: 8e6a204a7ca3814ad0a34d09211f7e27985f7b34

Author: LESANF

packages/react-native/Libraries/Pressability/PressabilityDebug.js

@@ -36,8 +36,9 @@ type Props = Readonly<{
  *
  */
 export function PressabilityDebugView(props: Props): React.Node {
+  const enabled = useIsEnabled();
   if (__DEV__) {
-    if (isEnabled()) {
+    if (enabled) {
       const normalizedColor = normalizeColor(props.color);
       if (typeof normalizedColor !== 'number') {
         return null;
@@ -70,6 +71,7 @@ export function PressabilityDebugView(props: Props): React.Node {
 }
 
 let isDebugEnabled = false;
+const listeners: Set<() => void> = new Set();
 
 export function isEnabled(): boolean {
   if (__DEV__) {
@@ -80,6 +82,30 @@ export function isEnabled(): boolean {
 
 export function setEnabled(value: boolean): void {
   if (__DEV__) {
+    if (isDebugEnabled === value) {
+      return;
+    }
     isDebugEnabled = value;
+    listeners.forEach(listener => listener());
   }
 }
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function useIsEnabledDev(): boolean {
+  return React.useSyncExternalStore(subscribe, isEnabled);
+}
+
+/**
+ * Like `isEnabled`, but re-renders the calling component when the value
+ * changes, so toggling it does not require remounting the app. Outside of
+ * `__DEV__` it always returns `false` and uses no hooks.
+ */
+export const useIsEnabled: () => boolean = __DEV__
+  ? useIsEnabledDev
+  : () => false;

packages/react-native/Libraries/Pressability/__tests__/PressabilityDebug-itest.js

@@ -0,0 +1,137 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as PressabilityDebug from '../PressabilityDebug';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {useEffect} from 'react';
+import {Pressable, Text} from 'react-native';
+
+describe('PressabilityDebug', () => {
+  beforeEach(() => {
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(false);
+    });
+  });
+
+  afterEach(() => {
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(false);
+    });
+  });
+
+  it('shows press targets when enabled, without remounting', () => {
+    const root = Fantom.createRoot();
+    let mountCount = 0;
+
+    function Screen() {
+      useEffect(() => {
+        mountCount++;
+      }, []);
+      return <Pressable style={{height: 10}} />;
+    }
+
+    Fantom.runTask(() => {
+      root.render(<Screen />);
+    });
+
+    expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(<rn-view />);
+
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(true);
+    });
+
+    expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(
+      <rn-view>
+        <rn-view />
+      </rn-view>,
+    );
+
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(false);
+    });
+
+    expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(<rn-view />);
+    expect(mountCount).toBe(1);
+  });
+
+  it('colors pressable text when enabled', () => {
+    const root = Fantom.createRoot();
+
+    Fantom.runTask(() => {
+      root.render(<Text onPress={() => {}}>text</Text>);
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['foregroundColor']}).toJSX(),
+    ).toEqual(
+      <rn-paragraph foregroundColor="rgba(0, 0, 0, 0)">text</rn-paragraph>,
+    );
+
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(true);
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['foregroundColor']}).toJSX(),
+    ).toEqual(
+      <rn-paragraph foregroundColor="rgba(255, 0, 255, 1)">text</rn-paragraph>,
+    );
+  });
+
+  it('colors nested pressable text when enabled', () => {
+    const root = Fantom.createRoot();
+
+    Fantom.runTask(() => {
+      root.render(
+        <Text>
+          <Text onPress={() => {}}>nested</Text>
+        </Text>,
+      );
+    });
+
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(true);
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['foregroundColor']}).toJSX(),
+    ).toEqual(
+      <rn-paragraph foregroundColor="rgba(0, 0, 0, 0)">
+        <rn-text foregroundColor="rgba(255, 0, 255, 1)">nested</rn-text>
+      </rn-paragraph>,
+    );
+  });
+
+  it('does not color disabled text', () => {
+    const root = Fantom.createRoot();
+
+    Fantom.runTask(() => {
+      PressabilityDebug.setEnabled(true);
+    });
+
+    Fantom.runTask(() => {
+      root.render(
+        <Text disabled onPress={() => {}}>
+          text
+        </Text>,
+      );
+    });
+
+    expect(
+      root.getRenderedOutput({props: ['foregroundColor']}).toJSX(),
+    ).toEqual(
+      <rn-paragraph foregroundColor="rgba(0, 0, 0, 0)">text</rn-paragraph>,
+    );
+  });
+});

packages/react-native/Libraries/ReactNative/AppContainer-dev.js

@@ -27,7 +27,7 @@ import {RootTagContext, createRootTag} from './RootTag';
 import * as React from 'react';
 import {useRef} from 'react';
 
-const {useEffect, useState, useCallback} = React;
+const {useEffect, useState} = React;
 
 const reactDevToolsHook: ReactDevToolsGlobalHook = (window as $FlowFixMe)
   .__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -51,15 +51,13 @@ type ExternalInspection = {
 
 type InspectorDeferredProps = {
   inspectedViewRef: InspectedViewRef,
-  onInspectedViewRerenderRequest: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
   devMenuInspectorOpen: boolean,
   externalInspection: ExternalInspection,
 };
 
 const InspectorDeferred = ({
   inspectedViewRef,
-  onInspectedViewRerenderRequest,
   reactDevToolsAgent,
   devMenuInspectorOpen,
   externalInspection,
@@ -72,7 +70,6 @@ const InspectorDeferred = ({
   return (
     <Inspector
       inspectedViewRef={inspectedViewRef}
-      onRequestRerenderApp={onInspectedViewRerenderRequest}
       reactDevToolsAgent={reactDevToolsAgent}
       devMenuInspectorOpen={devMenuInspectorOpen}
       externalInspection={externalInspection}
@@ -118,7 +115,6 @@ const AppContainer = ({
     debuggingOverlayRef,
   );
 
-  const [key, setKey] = useState(0);
   const [shouldRenderInspector, setShouldRenderInspector] = useState(false);
   const [reactDevToolsAgent, setReactDevToolsAgent] =
     useState<ReactDevToolsAgent | void>(reactDevToolsHook?.reactDevtoolsAgent);
@@ -157,7 +153,6 @@ const AppContainer = ({
     <View
       collapsable={reactDevToolsAgent == null && !shouldRenderInspector}
       pointerEvents="box-none"
-      key={key}
       style={rootViewStyle || styles.container}
       ref={innerViewRef}>
       {children}
@@ -172,11 +167,6 @@ const AppContainer = ({
     );
   }
 
-  const onInspectedViewRerenderRequest = useCallback(
-    () => setKey(k => k + 1),
-    [],
-  );
-
   return (
     <RootTagContext.Provider value={createRootTag(rootTag)}>
       <View
@@ -198,7 +188,6 @@ const AppContainer = ({
           externalInspection.externalInspectingEnabled) && (
           <InspectorDeferred
             inspectedViewRef={innerViewRef}
-            onInspectedViewRerenderRequest={onInspectedViewRerenderRequest}
             reactDevToolsAgent={reactDevToolsAgent}
             devMenuInspectorOpen={shouldRenderInspector}
             externalInspection={externalInspection}

packages/react-native/Libraries/Text/Text.js

@@ -166,11 +166,6 @@ const TextImpl: component(
     selectionColor != null ? processColor(selectionColor) : undefined;
 
   let _style = style;
-  if (__DEV__) {
-    if (PressabilityDebug.isEnabled() && onPress != null) {
-      _style = [style, {color: 'magenta'}];
-    }
-  }
 
   let _numberOfLines = numberOfLines;
   if (_numberOfLines != null && !(_numberOfLines >= 0)) {
@@ -471,6 +466,24 @@ function useTextPressability({
   );
 }
 
+function usePressabilityDebugStyleDev(
+  style: ?TextStyleProp,
+  onPress: ?(event: GestureResponderEvent) => unknown,
+): ?TextStyleProp {
+  const isDebugEnabled = PressabilityDebug.useIsEnabled();
+  return isDebugEnabled && onPress != null
+    ? [style, {color: 'magenta'}]
+    : style;
+}
+
+/**
+ * Colors pressable text when press targets are shown by the Inspector.
+ * Outside of `__DEV__` it returns the style unchanged and uses no hooks.
+ */
+const usePressabilityDebugStyle: typeof usePressabilityDebugStyleDev = __DEV__
+  ? usePressabilityDebugStyleDev
+  : style => style;
+
 /**
  * Wrap the NativeVirtualText component and initialize pressability.
  *
@@ -485,10 +498,15 @@ component PressableVirtualText(
   const [isHighlighted, eventHandlersForText] = useTextPressability(
     textPressabilityProps,
   );
+  const style = usePressabilityDebugStyle(
+    textProps.style,
+    textPressabilityProps.onPress,
+  );
 
   return (
     <NativeVirtualText
       {...textProps}
+      style={style}
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={true}
@@ -513,12 +531,18 @@ component PressableText(
     textPressabilityProps,
   );
 
+  const style = usePressabilityDebugStyle(
+    textProps.style,
+    textPressabilityProps.onPress,
+  );
+
   const NativeComponent =
     selectable === true ? NativeSelectableText : NativeText;
 
   return (
     <NativeComponent
       {...textProps}
+      style={style}
       {...eventHandlersForText}
       isHighlighted={isHighlighted}
       isPressable={true}

packages/react-native/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -56,15 +56,13 @@ type ExternalInspection = {
 
 type Props = {
   inspectedViewRef: InspectedViewRef,
-  onRequestRerenderApp: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
   devMenuInspectorOpen: boolean,
   externalInspection: ExternalInspection,
 };
 
 function Inspector({
   inspectedViewRef,
-  onRequestRerenderApp,
   reactDevToolsAgent,
   devMenuInspectorOpen,
   externalInspection,
@@ -79,6 +77,7 @@ function Inspector({
   const [selectionIndex, setSelectionIndex] = useState<?number>(null);
   const [elementsHierarchy, setElementsHierarchy] =
     useState<?ElementsHierarchy>(null);
+  const touchTargeting = PressabilityDebug.useIsEnabled();
 
   // Derive inspecting state: external inspection forces it on, otherwise use local state
   const isInspecting = externalInspectingEnabled || inspectingEnabled;
@@ -160,7 +159,6 @@ function Inspector({
 
   const setTouchTargeting = (val: boolean) => {
     PressabilityDebug.setEnabled(val);
-    onRequestRerenderApp();
   };
 
   const panelContainerStyle =
@@ -188,7 +186,7 @@ function Inspector({
             hierarchy={elementsHierarchy}
             selection={selectionIndex}
             setSelection={setSelection}
-            touchTargeting={PressabilityDebug.isEnabled()}
+            touchTargeting={touchTargeting}
             setTouchTargeting={setTouchTargeting}
           />
         </SafeAreaView>