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

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';
 

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;
 "
 `;