fix: Fix id prop not working on all Touchable components (#38169)

Summary: This PR fixed the `id` prop to being correctly mapped to `nativeID` on the following components: `TouchableBounce`, `TouchableHighlight`, ` TouchableNativeFeedback`, and `TouchableOpacity`. Closes #38117 Follow up of #34522 ## Changelog: [GENERAL] [FIXED] - Fix `id` prop not working on `TouchableBounce`, `TouchableHighlight`, ` TouchableNativeFeedback`, and `TouchableOpacity` Pull Request resolved: #38169 Test Plan: Ensure that the `id` prop android tests pass on CircleCI Reviewed By: jacdebug Differential Revision: D47209319 Pulled By: cortinico fbshipit-source-id: 50cdf0f1113e067aa46d55e4faaff6818509546e
facebook · Jul 4, 2023 · 0e80fdb · 0e80fdb
1 parent ee1cd13
commit 0e80fdb
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js
@@ -181,7 +181,7 @@ class TouchableBounce extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         hitSlop={this.props.hitSlop}
         focusable={

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js
@@ -344,7 +344,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         focusable={
           this.props.focusable !== false && this.props.onPress !== undefined
         }
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js
@@ -322,7 +322,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props.focusable !== false &&
           this.props.onPress !== undefined &&
           !this.props.disabled,
-        nativeID: this.props.nativeID,
+        nativeID: this.props.id ?? this.props.nativeID,
         nextFocusDown: this.props.nextFocusDown,
         nextFocusForward: this.props.nextFocusForward,
         nextFocusLeft: this.props.nextFocusLeft,

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js
@@ -275,7 +275,7 @@ class TouchableOpacity extends React.Component<Props, State> {
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
         style={[this.props.style, {opacity: this.state.anim}]}
-        nativeID={this.props.nativeID}
+        nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
         nextFocusDown={this.props.nextFocusDown}