From 8e7263a415676d1fb08da027c9dc6ca9fc2b6573 Mon Sep 17 00:00:00 2001
From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com>
Date: Thu, 28 Mar 2024 09:40:48 -0700
Subject: [PATCH] Add forwardRef call to Button Component (#43666)

Summary:
When RN moved Button component from a class component to a function component (https://github.com/facebook/react-native/commit/07e8ae42bed71f54bbe0e786ccad88b2f14648a4) a forwardRef call was not added to the Button control. This caused a set of tests downstream in React Native for Windows to fail because they rely on being able to pass a ref through to the Button control.

## Changelog:
[GENERAL] [FIXED] - Adds forwardRef call to new functional component implementation of Button control.

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

Test Plan: Button render remains the same.

Reviewed By: fabriziocucci

Differential Revision: D55398765

Pulled By: zeyap

fbshipit-source-id: ba32c764c16cb529ab1c92cb7888f2bae0f16f5f
---
 .../react-native/Libraries/Components/Button.js   | 15 ++++++++++-----
 .../__snapshots__/public-api-test.js.snap         |  8 +++++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js
index a2d00cd70ec..e52feb8e520 100644
--- a/packages/react-native/Libraries/Components/Button.js
+++ b/packages/react-native/Libraries/Components/Button.js
@@ -280,7 +280,13 @@ type ButtonProps = $ReadOnly<{|
   ```
  */
 
-const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
+const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
+  Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
+
+const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof Touchable>,
+> = React.forwardRef((props: ButtonProps, ref) => {
   const {
     accessibilityLabel,
     accessibilityState,
@@ -345,8 +351,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
   );
   const formattedTitle =
     Platform.OS === 'android' ? title.toUpperCase() : title;
-  const Touchable =
-    Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity;
 
   // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused.
   const _importantForAccessibility =
@@ -374,7 +378,8 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       testID={testID}
       disabled={disabled}
       onPress={onPress}
-      touchSoundDisabled={touchSoundDisabled}>
+      touchSoundDisabled={touchSoundDisabled}
+      ref={ref}>
       <View style={buttonStyles}>
         <Text style={textStyles} disabled={disabled}>
           {formattedTitle}
@@ -382,7 +387,7 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       </View>
     </Touchable>
   );
-};
+});
 
 Button.displayName = 'Button';
 
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
index e03ee16acd6..33509f9a56a 100644
--- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
+++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -1677,7 +1677,13 @@ exports[`public API should not change unintentionally Libraries/Components/Butto
   accessibilityHint?: ?string,
   accessibilityLanguage?: ?Stringish,
 |}>;
-declare const Button: React.AbstractComponent<ButtonProps>;
+declare const Touchable:
+  | typeof TouchableNativeFeedback
+  | typeof TouchableOpacity;
+declare const Button: React.AbstractComponent<
+  ButtonProps,
+  React.ElementRef<typeof Touchable>,
+>;
 declare export default typeof Button;
 "
 `;