Pressable works

Author: m-bert

packages/react-native-gesture-handler/src/components/Pressable/utils.ts

@@ -142,10 +142,53 @@ const gestureTouchToPressableEvent = (
   };
 };
 
+const mockCenterPressableEvent = (
+  dimensions: PressableDimensions
+): PressableEvent => {
+  const timestamp = Date.now();
+
+  // As far as I can see, there isn't a conventional way of getting targetId with the data we get
+  const targetId = 0;
+
+  // tvOS activates a focused button via the Select button rather than a touch, so there are no
+  // touch coordinates. Report the view's center as the press location — a sensible representative
+  // point for the event handed to user callbacks.
+  const locationX = dimensions.width / 2;
+  const locationY = dimensions.height / 2;
+
+  const pressEvent: InnerPressableEvent = {
+    identifier: targetId,
+    locationX,
+    locationY,
+    pageX: locationX,
+    pageY: locationY,
+    target: targetId,
+    timestamp,
+    touches: [],
+    changedTouches: [],
+  };
+
+  return {
+    nativeEvent: {
+      touches: [pressEvent],
+      changedTouches: [pressEvent],
+      identifier: targetId,
+      locationX,
+      locationY,
+      pageX: locationX,
+      pageY: locationY,
+      target: targetId,
+      timestamp,
+      force: undefined,
+    },
+  };
+};
+
 export {
   addInsets,
   gestureToPressableEvent,
   gestureTouchToPressableEvent,
   isTouchWithinInset,
+  mockCenterPressableEvent,
   numberAsInset,
 };

packages/react-native-gesture-handler/src/v3/components/Pressable.tsx

@@ -28,6 +28,7 @@ import {
   gestureToPressableEvent,
   gestureTouchToPressableEvent,
   isTouchWithinInset,
+  mockCenterPressableEvent,
   numberAsInset,
 } from '../../components/Pressable/utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
@@ -151,8 +152,9 @@ const Pressable = (props: PressableProps) => {
   }, [cancelDelayedPress, cancelLongPress]);
 
   const handlePressIn = useCallback(
-    (event: PressableEvent) => {
+    (event: PressableEvent, skipBoundsCheck = false) => {
       if (
+        !skipBoundsCheck &&
         !isTouchWithinInset(
           dimensions.current,
           normalizedHitSlop,
@@ -305,11 +307,18 @@ const Pressable = (props: PressableProps) => {
       }
     },
     onBegin: () => {
+      if (Platform.isTV) {
+        // tvOS drives this native gesture from the focus-engine Select press.
+        // The press state machine is touch-based and never
+        // receives LONG_PRESS_TOUCHES_DOWN here, so bypass it and drive the press handlers directly.
+        // A focus-driven press has no coordinates, so skip the hit-slop bounds check entirely.
+        handlePressIn(mockCenterPressableEvent(dimensions.current), true);
+        return;
+      }
       stateMachine.handleEvent(StateMachineEvent.NATIVE_BEGIN);
     },
     onActivate: () => {
-      if (Platform.OS !== 'android') {
-        // Native.onActivate is broken with Android + hitSlop
+      if (!Platform.isTV && Platform.OS !== 'android') {
         stateMachine.handleEvent(StateMachineEvent.NATIVE_START);
       }
     },
@@ -319,6 +328,16 @@ const Pressable = (props: PressableProps) => {
       if (Platform.OS === 'web') {
         return;
       }
+
+      if (Platform.isTV) {
+        handlePressOut(
+          mockCenterPressableEvent(dimensions.current),
+          !event.canceled
+        );
+        handleFinalize();
+        return;
+      }
+
       stateMachine.handleEvent(
         event.canceled ? StateMachineEvent.CANCEL : StateMachineEvent.FINALIZE
       );
@@ -365,10 +384,18 @@ const Pressable = (props: PressableProps) => {
     [onLayout]
   );
 
+  const tvProps = Platform.isTV
+    ? {
+        isTVSelectable:
+          remainingProps.focusable ?? remainingProps.isTVSelectable ?? false,
+      }
+    : null;
+
   return (
     <GestureDetector gesture={gesture}>
       <PureNativeButton
         {...remainingProps}
+        {...tvProps}
         onLayout={setDimensions}
         accessible={accessible !== false}
         hitSlop={appliedHitSlop}