Align public type for Touchable

Summary:
**Problem**

Under the Strict TypeScript API, `Touchable` was a value-only TypeScript export referencing `TouchableImpl`, which leaked additional `{Mixin, renderDebugView}` members.

**Fix**

Export a declaration-merged `Touchable` type at root, specifying a public interface for this module that excludes these members.

**Impact**

- API snapshot cleanup: Hides internal `TouchableImpl` and `TouchableMixinImpl` details.
- **Functional**: Removes `Touchable.renderDebugView()` from the public API. This is **non-breaking** as this type was not previously modelled under the manual TS types.
- **Functional**: Fixes equivalence of `Touchable` when referenced as a type under Uniwind — which was a breaking change vs the manual TS types (extra props were leaked).

https://github.com/uni-stack/uniwind/blob/6b498f2ada673d2b92915c79a703286078b953c2/packages/uniwind/types.d.ts#L40

**Notes**

- As part of this change, other `Libraries/`/`*Impl` APIs were audited to check for similar internal API leaks. This is the only obvious instance.
- Also simplify outdated doc comment (`Touchable` subtypes are intended for primary use and have separate docs pages).

Changelog:
[General][Fixed] - **Strict TypeScript API**: Export a public `Touchable` type object, reducing its API to match the previous manual types

Differential Revision: D110483989

Author: huntie

packages/react-native/Libraries/Components/Touchable/Touchable.js

@@ -24,6 +24,24 @@ import BoundingDimensions from './BoundingDimensions';
 import Position from './Position';
 import * as React from 'react';
 
+// Declaration-merged with `TouchableImpl` under TypeScript - this type is the
+// public API for `Touchable`, hiding internal details.
+/**
+ * Touch event handlers a host component emits as a touch point moves over it,
+ * from first contact through release or cancellation.
+ *
+ * These fire for every touch at the DOM-like event layer, independent of the
+ * responder system. For press interactions with visual feedback, prefer
+ * {@link Pressable}.
+ */
+export type Touchable = Readonly<{
+  onTouchCancel?: ?(e: GestureResponderEvent) => void,
+  onTouchEnd?: ?(e: GestureResponderEvent) => void,
+  onTouchEndCapture?: ?(e: GestureResponderEvent) => void,
+  onTouchMove?: ?(e: GestureResponderEvent) => void,
+  onTouchStart?: ?(e: GestureResponderEvent) => void,
+}>;
+
 const extractSingleTouch = (nativeEvent: {
   readonly changedTouches: ReadonlyArray<GestureResponderEvent['nativeEvent']>,
   readonly force?: number,
@@ -879,90 +897,6 @@ const {
 TouchableMixinImpl.withoutDefaultFocusAndBlur =
   TouchableMixinWithoutDefaultFocusAndBlur;
 
-/**
- * `Touchable`: Taps done right.
- *
- * You hook your `ResponderEventPlugin` events into `Touchable`. `Touchable`
- * will measure time/geometry and tells you when to give feedback to the user.
- *
- * ====================== Touchable Tutorial ===============================
- * The `Touchable` mixin helps you handle the "press" interaction. It analyzes
- * the geometry of elements, and observes when another responder (scroll view
- * etc) has stolen the touch lock. It notifies your component when it should
- * give feedback to the user. (bouncing/highlighting/unhighlighting).
- *
- * - When a touch was activated (typically you highlight)
- * - When a touch was deactivated (typically you unhighlight)
- * - When a touch was "pressed" - a touch ended while still within the geometry
- *   of the element, and no other element (like scroller) has "stolen" touch
- *   lock ("responder") (Typically you bounce the element).
- *
- * A good tap interaction isn't as simple as you might think. There should be a
- * slight delay before showing a highlight when starting a touch. If a
- * subsequent touch move exceeds the boundary of the element, it should
- * unhighlight, but if that same touch is brought back within the boundary, it
- * should rehighlight again. A touch can move in and out of that boundary
- * several times, each time toggling highlighting, but a "press" is only
- * triggered if that touch ends while within the element's boundary and no
- * scroller (or anything else) has stolen the lock on touches.
- *
- * To create a new type of component that handles interaction using the
- * `Touchable` mixin, do the following:
- *
- * - Initialize the `Touchable` state.
- *
- *   getInitialState: function() {
- *     return merge(this.touchableGetInitialState(), yourComponentState);
- *   }
- *
- * - Choose the rendered component who's touches should start the interactive
- *   sequence. On that rendered node, forward all `Touchable` responder
- *   handlers. You can choose any rendered node you like. Choose a node whose
- *   hit target you'd like to instigate the interaction sequence:
- *
- *   // In render function:
- *   return (
- *     <View
- *       onStartShouldSetResponder={this.touchableHandleStartShouldSetResponder}
- *       onResponderTerminationRequest={this.touchableHandleResponderTerminationRequest}
- *       onResponderGrant={this.touchableHandleResponderGrant}
- *       onResponderMove={this.touchableHandleResponderMove}
- *       onResponderRelease={this.touchableHandleResponderRelease}
- *       onResponderTerminate={this.touchableHandleResponderTerminate}>
- *       <View>
- *         Even though the hit detection/interactions are triggered by the
- *         wrapping (typically larger) node, we usually end up implementing
- *         custom logic that highlights this inner one.
- *       </View>
- *     </View>
- *   );
- *
- * - You may set up your own handlers for each of these events, so long as you
- *   also invoke the `touchable*` handlers inside of your custom handler.
- *
- * - Implement the handlers on your component class in order to provide
- *   feedback to the user. See documentation for each of these class methods
- *   that you should implement.
- *
- *   touchableHandlePress: function() {
- *      this.performBounceAnimation();  // or whatever you want to do.
- *   },
- *   touchableHandleActivePressIn: function() {
- *     this.beginHighlighting(...);  // Whatever you like to convey activation
- *   },
- *   touchableHandleActivePressOut: function() {
- *     this.endHighlighting(...);  // Whatever you like to convey deactivation
- *   },
- *
- * - There are more advanced methods you can implement (see documentation below):
- *   touchableGetHighlightDelayMS: function() {
- *     return 20;
- *   }
- *   // In practice, *always* use a predeclared constant (conserve memory).
- *   touchableGetPressRectOffset: function() {
- *     return {top: 20, left: 20, right: 20, bottom: 100};
- *   }
- */
 const TouchableImpl = {
   Mixin: TouchableMixinImpl,
   /**

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<67eb674c33870c82986054f0cee48385>>
+ * @generated SignedSource<<d7a5a7da19dfd641655a5e645b6bf1c0>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -399,16 +399,6 @@ declare const staggerImpl: (
   time: number,
   animations: Array<CompositeAnimation>,
 ) => CompositeAnimation
-declare const States: {
-  ERROR: "ERROR"
-  NOT_RESPONDER: "NOT_RESPONDER"
-  RESPONDER_ACTIVE_LONG_PRESS_IN: "RESPONDER_ACTIVE_LONG_PRESS_IN"
-  RESPONDER_ACTIVE_LONG_PRESS_OUT: "RESPONDER_ACTIVE_LONG_PRESS_OUT"
-  RESPONDER_ACTIVE_PRESS_IN: "RESPONDER_ACTIVE_PRESS_IN"
-  RESPONDER_ACTIVE_PRESS_OUT: "RESPONDER_ACTIVE_PRESS_OUT"
-  RESPONDER_INACTIVE_PRESS_IN: "RESPONDER_INACTIVE_PRESS_IN"
-  RESPONDER_INACTIVE_PRESS_OUT: "RESPONDER_INACTIVE_PRESS_OUT"
-}
 declare const subtract: typeof $$AnimatedImplementation.subtract
 declare const subtractImpl: (
   a: AnimatedNode_default | number,
@@ -452,7 +442,6 @@ declare const ToastAndroid_default: {
     yOffset: number,
   ) => void
 }
-declare const Touchable: typeof TouchableImpl_default
 declare const Touchable_default: (
   props: TouchableOpacityProps & {
     ref?: React.Ref<TouchableOpacityInstance>
@@ -464,33 +453,6 @@ declare const TouchableHighlight_default: (
     ref?: React.Ref<TouchableHighlightInstance>
   },
 ) => React.ReactNode
-declare const TouchableImpl_default: {
-  Mixin: typeof TouchableMixinImpl
-  renderDebugView: ($$PARAM_0$$: {
-    color: ColorValue
-    hitSlop?: EdgeInsetsProp
-  }) => null | React.ReactNode
-}
-declare const TouchableMixinImpl: {
-  withoutDefaultFocusAndBlur: {}
-  componentDidMount: () => void
-  componentWillUnmount: () => void
-  touchableGetInitialState: () => {
-    touchable: {
-      responderID: GestureResponderEvent["currentTarget"] | undefined
-      touchState: TouchableState | undefined
-    }
-  }
-  touchableHandleBlur: (e: BlurEvent) => void
-  touchableHandleFocus: (e: FocusEvent) => void
-  touchableHandleResponderGrant: (e: GestureResponderEvent) => void
-  touchableHandleResponderMove: (e: GestureResponderEvent) => void
-  touchableHandleResponderRelease: (e: GestureResponderEvent) => void
-  touchableHandleResponderTerminate: (e: GestureResponderEvent) => void
-  touchableHandleResponderTerminationRequest: () => any
-  touchableHandleStartShouldSetResponder: () => any
-  touchableLongPressCancelsPress: () => boolean
-}
 declare const TouchableOpacity: typeof Touchable_default
 declare const UIManager: typeof UIManager_default
 declare const UIManager_default: UIManagerJSInterface
@@ -5353,7 +5315,13 @@ declare type TimingAnimationConfig = Readonly<
   }
 >
 declare type ToastAndroid = typeof ToastAndroid
-declare type Touchable = typeof Touchable
+declare type Touchable = {
+  readonly onTouchCancel?: (e: GestureResponderEvent) => void
+  readonly onTouchEnd?: (e: GestureResponderEvent) => void
+  readonly onTouchEndCapture?: (e: GestureResponderEvent) => void
+  readonly onTouchMove?: (e: GestureResponderEvent) => void
+  readonly onTouchStart?: (e: GestureResponderEvent) => void
+}
 declare type TouchableHighlight = typeof TouchableHighlight
 declare type TouchableHighlightBaseProps = {
   readonly activeOpacity?: number
@@ -5460,15 +5428,6 @@ declare type TouchableOpacityTVProps = {
   readonly nextFocusRight?: number
   readonly nextFocusUp?: number
 }
-declare type TouchableState =
-  | typeof States.ERROR
-  | typeof States.NOT_RESPONDER
-  | typeof States.RESPONDER_ACTIVE_LONG_PRESS_IN
-  | typeof States.RESPONDER_ACTIVE_LONG_PRESS_OUT
-  | typeof States.RESPONDER_ACTIVE_PRESS_IN
-  | typeof States.RESPONDER_ACTIVE_PRESS_OUT
-  | typeof States.RESPONDER_INACTIVE_PRESS_IN
-  | typeof States.RESPONDER_INACTIVE_PRESS_OUT
 declare function TouchableWithoutFeedback(
   props: TouchableWithoutFeedbackProps,
 ): React.ReactNode
@@ -6153,7 +6112,7 @@ export {
   TextProps, // 58466ea1
   TextStyle, // b62b8399
   ToastAndroid, // 88a8969a
-  Touchable, // c15da0a2
+  Touchable, // f740327f
   TouchableHighlight, // 20ba0199
   TouchableHighlightInstance, // b510c0eb
   TouchableHighlightProps, // 337a9164

packages/react-native/index.js.flow

@@ -175,6 +175,7 @@ export type {
 } from './Libraries/Components/TextInput/TextInput';
 export {default as TextInput} from './Libraries/Components/TextInput/TextInput';
 
+export type {Touchable} from './Libraries/Components/Touchable/Touchable';
 export {default as Touchable} from './Libraries/Components/Touchable/Touchable';
 
 export type {