Extract to helper

Author: m-bert

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

@@ -1,5 +1,27 @@
+import { Platform } from 'react-native';
+
 import type { BaseGesture, GestureRef } from '../handlers/gestures/gesture';
 
+type TVProps = {
+  focusable?: boolean | undefined;
+  isTVSelectable?: boolean | undefined;
+};
+
+/**
+ * Gesture Handler buttons render the native button component directly, bypassing RN's `<View>` —
+ * the only place the `focusable` prop is translated into `isTVSelectable`, which actually drives
+ * tvOS focusability.
+ */
+export function getTVProps(props: TVProps): TVProps | null {
+  if (!Platform.isTV) {
+    return null;
+  }
+
+  return {
+    isTVSelectable: props.focusable ?? props.isTVSelectable ?? false,
+  };
+}
+
 export type RelationPropName =
   | 'simultaneousWithExternalGesture'
   | 'requireExternalGestureToFail'

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

@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { Animated, Platform, StyleSheet } from 'react-native';
 
 import GestureHandlerButton from '../../components/GestureHandlerButton';
+import { getTVProps } from '../../components/utils';
 import createNativeWrapper from '../createNativeWrapper';
 import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
 import type { GestureEndEvent, GestureEvent } from '../types';
@@ -95,11 +96,7 @@ export const BaseButton = (props: BaseButtonProps) => {
     props.onFinalize?.(e);
   };
 
-  const tvProps = Platform.isTV
-    ? {
-        isTVSelectable: rest.focusable ?? rest.isTVSelectable ?? false,
-      }
-    : null;
+  const tvProps = getTVProps(rest);
 
   return (
     <RawButton

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

@@ -31,6 +31,7 @@ import {
   mockCenterPressableEvent,
   numberAsInset,
 } from '../../components/Pressable/utils';
+import { getTVProps } from '../../components/utils';
 import { PressabilityDebugView } from '../../handlers/PressabilityDebugView';
 import { useIsScreenReaderEnabled } from '../../useIsScreenReaderEnabled';
 import { INT32_MAX, isTestEnv } from '../../utils';
@@ -384,12 +385,7 @@ const Pressable = (props: PressableProps) => {
     [onLayout]
   );
 
-  const tvProps = Platform.isTV
-    ? {
-        isTVSelectable:
-          remainingProps.focusable ?? remainingProps.isTVSelectable ?? false,
-      }
-    : null;
+  const tvProps = getTVProps(remainingProps);
 
   return (
     <GestureDetector gesture={gesture}>

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

@@ -2,6 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { Platform } from 'react-native';
 
 import GestureHandlerButton from '../../../components/GestureHandlerButton';
+import { getTVProps } from '../../../components/utils';
 import { NativeDetector } from '../../detectors/NativeDetector';
 import { useNativeGesture } from '../../hooks';
 import type {
@@ -208,11 +209,7 @@ export const Touchable = (props: TouchableProps) => {
       }
     : TRANSPARENT_RIPPLE;
 
-  const tvProps = Platform.isTV
-    ? {
-        isTVSelectable: rest.focusable ?? rest.isTVSelectable ?? false,
-      }
-    : null;
+  const tvProps = getTVProps(rest);
 
   return (
     <NativeDetector gesture={nativeGesture}>