From 0a0cd6517fdd6fbcc751b4d9ae19106740b23703 Mon Sep 17 00:00:00 2001
From: D N <4661784+retyui@users.noreply.github.com>
Date: Fri, 5 Apr 2024 15:28:26 -0700
Subject: [PATCH] chore: [TS] Remove `tvParallaxProperties` prop & add missing
 `focusable`, `rejectResponderTermination` props (#43912)

Summary:
I do TV developing using a RN, and found one missing prop in TS:

```tsx
<TouchableOpacity focusable={false} />
//                          ^^^ Error: Property focusable does not exist on type Readonly<TouchableOpacityProps>
```

Then I decides to compare Flow & TS types definitions and found more:

1.  `tvParallaxProperties` - [was removed](https://github.com/search?q=repo%3Afacebook%2Freact-native%20tvParallaxProperties&type=code) and never used in the runtime (but [`rn-tvos`](https://github.com/react-native-tvos/react-native-tvos/blob/92f73d1d7966dd41e3d8d9101a4e298e9462887b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js#L299) has own ver. of `TouchableOpacity`  & handle its types)
2. `focusable` is missing
3. `rejectResponderTermination` is missing

## Changelog:

[GENERAL] [REMOVED] - [TS] Remove `tvParallaxProperties` prop from `TouchableOpacity` & add missing `focusable`, `rejectResponderTermination` props

Pull Request resolved: https://github.com/facebook/react-native/pull/43912

Test Plan: TypeScript tests were updated

Reviewed By: NickGerleman

Differential Revision: D55805520

Pulled By: javache

fbshipit-source-id: 5eb8c65857beb86361e74b9369a1739b1ae18190
---
 .../Touchable/TouchableOpacity.d.ts           | 17 -------
 .../Touchable/TouchableWithoutFeedback.d.ts   |  8 +++
 .../Components/View/ViewPropTypes.d.ts        | 49 -------------------
 .../types/__typetests__/index.tsx             | 35 +++++++++++++
 4 files changed, 43 insertions(+), 66 deletions(-)

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts
index 37c4ce6df43..01bdf53ca1d 100644
--- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts
+++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.d.ts
@@ -11,7 +11,6 @@ import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {TimerMixin} from '../../../types/private/TimerMixin';
 import {NativeMethods} from '../../../types/public/ReactNativeTypes';
-import {TVParallaxProperties} from '../View/ViewPropTypes';
 import {TouchableMixin} from './Touchable';
 import {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
 
@@ -70,22 +69,6 @@ export interface TouchableOpacityProps
    * Defaults to 0.2
    */
   activeOpacity?: number | undefined;
-
-  /**
-   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
-   *
-   * enabled: If true, parallax effects are enabled.  Defaults to true.
-   * shiftDistanceX: Defaults to 2.0.
-   * shiftDistanceY: Defaults to 2.0.
-   * tiltAngle: Defaults to 0.05.
-   * magnification: Defaults to 1.0.
-   * pressMagnification: Defaults to 1.0.
-   * pressDuration: Defaults to 0.3.
-   * pressDelay: Defaults to 0.0.
-   *
-   * @platform android
-   */
-  tvParallaxProperties?: TVParallaxProperties | undefined;
 }
 
 /**
diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts
index e0146fc31b3..572a96901d5 100644
--- a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts
+++ b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts
@@ -42,6 +42,8 @@ export interface TouchableWithoutFeedbackProps
     AccessibilityProps {
   children?: React.ReactNode | undefined;
 
+  rejectResponderTermination?: boolean | undefined;
+
   /**
    * Delay in ms, from onPressIn, before onLongPress is called.
    */
@@ -62,6 +64,12 @@ export interface TouchableWithoutFeedbackProps
    */
   disabled?: boolean | undefined;
 
+  /**
+   * Whether this View should be focusable with a non-touch input device,
+   * eg. receive focus with a hardware keyboard / TV remote.
+   */
+  focusable?: boolean | undefined;
+
   /**
    * This defines how far your touch can start away from the button.
    * This is added to pressRetentionOffset when moving off of the button.
diff --git a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts
index 20ff434f97b..bbd27b0eb3f 100644
--- a/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts
+++ b/packages/react-native/Libraries/Components/View/ViewPropTypes.d.ts
@@ -16,48 +16,6 @@ import {LayoutChangeEvent, PointerEvents} from '../../Types/CoreEventTypes';
 import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 
-export type TVParallaxProperties = {
-  /**
-   * If true, parallax effects are enabled.  Defaults to true.
-   */
-  enabled?: boolean | undefined;
-
-  /**
-   * Defaults to 2.0.
-   */
-  shiftDistanceX?: number | undefined;
-
-  /**
-   * Defaults to 2.0.
-   */
-  shiftDistanceY?: number | undefined;
-
-  /**
-   * Defaults to 0.05.
-   */
-  tiltAngle?: number | undefined;
-
-  /**
-   * Defaults to 1.0
-   */
-  magnification?: number | undefined;
-
-  /**
-   * Defaults to 1.0
-   */
-  pressMagnification?: number | undefined;
-
-  /**
-   * Defaults to 0.3
-   */
-  pressDuration?: number | undefined;
-
-  /**
-   * Defaults to 0.3
-   */
-  pressDelay?: number | undefined;
-};
-
 export interface TVViewPropsIOS {
   /**
    * *(Apple TV only)* When set to true, this view will be focusable
@@ -74,13 +32,6 @@ export interface TVViewPropsIOS {
    */
   hasTVPreferredFocus?: boolean | undefined;
 
-  /**
-   * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
-   *
-   * @platform ios
-   */
-  tvParallaxProperties?: TVParallaxProperties | undefined;
-
   /**
    * *(Apple TV only)* May be used to change the appearance of the Apple TV parallax effect when this view goes in or out of focus.  Defaults to 2.0.
    *
diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx
index 80a615b036c..9f4ec9ed747 100644
--- a/packages/react-native/types/__typetests__/index.tsx
+++ b/packages/react-native/types/__typetests__/index.tsx
@@ -484,6 +484,31 @@ function TouchableTest() {
   }
 }
 
+export class TouchableOpacityTest extends React.Component {
+  render() {
+    return (
+      <>
+        <TouchableOpacity focusable={false} />
+        <TouchableOpacity rejectResponderTermination={true} />
+        <TouchableOpacity
+          role="button"
+          accessibilityRole="button"
+          accessibilityLabelledBy="my-label-text"
+          aria-labelledby="my-label-text"
+        />
+        <TouchableOpacity
+          // @ts-expect-error - expected boolean value
+          focusable={1}
+        />
+        <TouchableOpacity
+          // @ts-expect-error - expected boolean value
+          rejectResponderTermination={'not-bool'}
+        />
+      </>
+    );
+  }
+}
+
 // TouchableNativeFeedbackTest
 export class TouchableNativeFeedbackTest extends React.Component {
   onPressButton = (e: GestureResponderEvent) => {
@@ -500,6 +525,16 @@ export class TouchableNativeFeedbackTest extends React.Component {
             <Text style={{margin: 30}}>Button</Text>
           </View>
         </TouchableNativeFeedback>
+        <TouchableWithoutFeedback focusable={false}>
+          <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
+            <Text style={{margin: 30}}>Button</Text>
+          </View>
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback rejectResponderTermination={true}>
+          <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
+            <Text style={{margin: 30}}>Button</Text>
+          </View>
+        </TouchableWithoutFeedback>
         <TouchableNativeFeedback
           background={TouchableNativeFeedback.Ripple('red', true)}>
           <View style={{width: 150, height: 100, backgroundColor: 'red'}}>