refactor(button): streamline variant and action props handling for improved clarity

Author: Sanchitv3

apps/starter-kit-expo/components/ui/badge/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 import { tva } from '@gluestack-ui/utils/nativewind-utils';
@@ -120,15 +120,17 @@ function Badge({
   className,
   ...props
 }: { className?: string } & IBadgeProps) {
+
+  const contextValue = useMemo(
+    () => ({ action, variant, size }),
+    [action, variant, size]
+  );
+
   return (
     <ContextView
       className={badgeStyle({ action, variant, class: className })}
       {...props}
-      context={{
-        action,
-        variant,
-        size,
-      }}
+      context={contextValue}
     >
       {children}
     </ContextView>
@@ -211,4 +213,4 @@ Badge.displayName = 'Badge';
 BadgeText.displayName = 'BadgeText';
 BadgeIcon.displayName = 'BadgeIcon';
 
-export { Badge, BadgeIcon, BadgeText };
+export { Badge, BadgeIcon, BadgeText };

apps/starter-kit-expo/components/ui/button/index.tsx

@@ -1,14 +1,14 @@
 'use client';
 import React from 'react';
 import { createButton } from '@gluestack-ui/core/button/creator';
-import { tva } from '@gluestack-ui/utils/nativewind-utils';
 import {
+  tva,
   withStyleContext,
   useStyleContext,
+  type VariantProps,
 } from '@gluestack-ui/utils/nativewind-utils';
 import { cssInterop } from 'nativewind';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-import type { VariantProps } from '@gluestack-ui/utils/nativewind-utils';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 
 const SCOPE = 'BUTTON';
@@ -326,14 +326,9 @@ const ButtonText = React.forwardRef<
           size: parentSize,
           action: parentAction,
         },
-        variant: variant as 'link' | 'outline' | 'solid' | undefined,
+        variant,
         size,
-        action: action as
-          | 'primary'
-          | 'secondary'
-          | 'positive'
-          | 'negative'
-          | undefined,
+        action,
         class: className,
       })}
     />
@@ -420,8 +415,8 @@ const ButtonGroup = React.forwardRef<
         className={buttonGroupStyle({
           class: className,
           space,
-          isAttached: isAttached as boolean,
-          flexDirection: flexDirection as any,
+          isAttached,
+          flexDirection,
         })}
         {...props}
         ref={ref}

apps/starter-kit-next/components/ui/badge/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 import { tva } from '@gluestack-ui/utils/nativewind-utils';
@@ -120,15 +120,17 @@ function Badge({
   className,
   ...props
 }: { className?: string } & IBadgeProps) {
+
+  const contextValue = useMemo(
+    () => ({ action, variant, size }),
+    [action, variant, size]
+  );
+
   return (
     <ContextView
       className={badgeStyle({ action, variant, class: className })}
       {...props}
-      context={{
-        action,
-        variant,
-        size,
-      }}
+      context={contextValue}
     >
       {children}
     </ContextView>
@@ -211,4 +213,4 @@ Badge.displayName = 'Badge';
 BadgeText.displayName = 'BadgeText';
 BadgeIcon.displayName = 'BadgeIcon';
 
-export { Badge, BadgeIcon, BadgeText };
+export { Badge, BadgeIcon, BadgeText };

apps/starter-kit-next/components/ui/button/index.tsx

@@ -1,14 +1,14 @@
 'use client';
 import React from 'react';
 import { createButton } from '@gluestack-ui/core/button/creator';
-import { tva } from '@gluestack-ui/utils/nativewind-utils';
 import {
+  tva,
   withStyleContext,
   useStyleContext,
+  type VariantProps,
 } from '@gluestack-ui/utils/nativewind-utils';
 import { cssInterop } from 'nativewind';
 import { ActivityIndicator, Pressable, Text, View } from 'react-native';
-import type { VariantProps } from 'tailwind-variants';
 import { PrimitiveIcon, UIIcon } from '@gluestack-ui/core/icon/creator';
 
 const SCOPE = 'BUTTON';
@@ -326,14 +326,9 @@ const ButtonText = React.forwardRef<
           size: parentSize,
           action: parentAction,
         },
-        variant: variant as 'link' | 'outline' | 'solid' | undefined,
+        variant,
         size,
-        action: action as
-          | 'primary'
-          | 'secondary'
-          | 'positive'
-          | 'negative'
-          | undefined,
+        action,
         class: className,
       })}
     />
@@ -420,8 +415,8 @@ const ButtonGroup = React.forwardRef<
         className={buttonGroupStyle({
           class: className,
           space,
-          isAttached: isAttached as boolean,
-          flexDirection: flexDirection as any,
+          isAttached,
+          flexDirection,
         })}
         {...props}
         ref={ref}