Convert button to use forwardRef (#4576)

src/components/Button.tsx

@@ -88,7 +88,9 @@ export function useButtonContext() {
   return React.useContext(Context)
 }
 
-export function Button({
+export const Button = React.forwardRef<View, ButtonProps>(
+  (
+    {
       children,
       variant,
       color,
@@ -99,7 +101,9 @@ export function Button({
       style,
       hoverStyle: hoverStyleProp,
       ...rest
-}: ButtonProps) {
+    },
+    ref,
+  ) => {
     const t = useTheme()
     const [state, setState] = React.useState({
       pressed: false,
@@ -179,7 +183,9 @@ export function Button({
             })
           } else {
             baseStyles.push(a.border, {
-            borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
+              borderColor: light
+                ? t.palette.primary_200
+                : t.palette.primary_900,
             })
           }
         } else if (variant === 'ghost') {
@@ -278,9 +284,19 @@ export function Button({
 
       if (shape === 'default') {
         if (size === 'large') {
-        baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md)
+          baseStyles.push(
+            {paddingVertical: 15},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
         } else if (size === 'medium') {
-        baseStyles.push({paddingVertical: 12}, a.px_2xl, a.rounded_sm, a.gap_md)
+          baseStyles.push(
+            {paddingVertical: 12},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
         } else if (size === 'small') {
           baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
         } else if (size === 'xsmall') {
@@ -368,6 +384,7 @@ export function Button({
         role="button"
         accessibilityHint={undefined} // optional
         {...rest}
+        ref={ref}
         aria-label={label}
         aria-pressed={state.pressed}
         accessibilityLabel={label}
@@ -417,7 +434,9 @@ export function Button({
         </Context.Provider>
       </Pressable>
     )
-}
+  },
+)
+Button.displayName = 'Button'
 
 export function useSharedButtonTextStyles() {
   const t = useTheme()