Stop remounting the app when toggling Touchables in the Element Inspector

[LESANF]

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:

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

Test Plan:

Before	After
rn-touchables-before.mp4	rn-touchables-after.mp4

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

[meta-cla]

Hi @LESANF!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

[javache]

Looks good, some minor tweaks.

[javache]

Can we wrap this in DEV too? Or stub usePressabilityDebugStyle with a no-op outside of DEV?

[LESANF]

Done, went with the stub. I also moved it up next to useTextPressability and used the named prop types instead

[javache]

Avoid any confusion, make this a stub which always returns false.

Suggested change

	export const useIsEnabled: () => boolean = __DEV__
	? useIsEnabledDev
	: isEnabled;
	export const useIsEnabled: () => boolean = __DEV__
	? useIsEnabledDev
	: () => false;

[LESANF]

Done, applied the suggestion thanks!

[meta-codesync]

@fabriziocucci has imported this pull request. If you are a Meta employee, you can view this in D122144366.

[meta-codesync]

@fabriziocucci merged this pull request in d194d8b.