chore: forward ref to Button (#4150)

src/components/Button/Button.tsx

@@ -15,6 +15,7 @@ import color from 'color';
 import { ButtonMode, getButtonColors } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $Omit, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import { splitStyles } from '../../utils/splitStyles';
 import ActivityIndicator from '../ActivityIndicator';
@@ -149,34 +150,37 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * export default MyComponent;
  * ```
  */
-const Button = ({
-  disabled,
-  compact,
-  mode = 'text',
-  dark,
-  loading,
-  icon,
-  buttonColor: customButtonColor,
-  textColor: customTextColor,
-  rippleColor: customRippleColor,
-  children,
-  accessibilityLabel,
-  accessibilityHint,
-  onPress,
-  onPressIn,
-  onPressOut,
-  onLongPress,
-  delayLongPress,
-  style,
-  theme: themeOverrides,
-  uppercase: uppercaseProp,
-  contentStyle,
-  labelStyle,
-  testID = 'button',
-  accessible,
-  maxFontSizeMultiplier,
-  ...rest
-}: Props) => {
+const Button = (
+  {
+    disabled,
+    compact,
+    mode = 'text',
+    dark,
+    loading,
+    icon,
+    buttonColor: customButtonColor,
+    textColor: customTextColor,
+    rippleColor: customRippleColor,
+    children,
+    accessibilityLabel,
+    accessibilityHint,
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    delayLongPress,
+    style,
+    theme: themeOverrides,
+    uppercase: uppercaseProp,
+    contentStyle,
+    labelStyle,
+    testID = 'button',
+    accessible,
+    maxFontSizeMultiplier,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
   const theme = useInternalTheme(themeOverrides);
   const isMode = React.useCallback(
     (modeToCompare: ButtonMode) => {
@@ -295,6 +299,7 @@ const Button = ({
   return (
     <Surface
       {...rest}
+      ref={ref}
       testID={`${testID}-container`}
       style={
         [
@@ -460,4 +465,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Button;
+export default forwardRef(Button);

src/utils/forwardRef.tsx

@@ -6,18 +6,18 @@ import type {
   ForwardRefExoticComponent,
 } from 'react';
 
-export type ForwarRefComponent<T, P = {}> = ForwardRefExoticComponent<
+export type ForwardRefComponent<T, P = {}> = ForwardRefExoticComponent<
   PropsWithoutRef<P> & RefAttributes<T>
 >;
 
 /**
  * TypeScript generated a large union of props from `ViewProps` in
  * `d.ts` files when using `React.forwardRef`. To prevent this
- * `ForwarRefComponent` was created and exported. Use this
+ * `ForwardRefComponent` was created and exported. Use this
  * `forwardRef` instead of `React.forwardRef` so you don't have to
- * import `ForwarRefComponent`.
+ * import `ForwardRefComponent`.
  * More info: https://github.com/callstack/react-native-paper/pull/3603
  */
 export const forwardRef: <T, P = {}>(
   render: ForwardRefRenderFunction<T, P>
-) => ForwarRefComponent<T, P> = React.forwardRef;
+) => ForwardRefComponent<T, P> = React.forwardRef;