From 89b6f6fb6205ff3e22f30b5f0833e660c778224f Mon Sep 17 00:00:00 2001
From: Marcelo Santos <marcelobatipta@gmail.com>
Date: Sat, 8 Nov 2025 17:23:47 -0300
Subject: [PATCH] fix(badge): make action, variant and size reactive to state
 changes

Previously, the Badge component did not update its visual state when
the `action`, `variant`, or `size` props were driven by React state.
This happened because `withStyleContext` memoized context values and
did not trigger a re-render for style context consumers.
---
 .../starter-kit-next/components/ui/badge/index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/starter-kit-next/components/ui/badge/index.tsx b/apps/starter-kit-next/components/ui/badge/index.tsx
index 924716776..7eafb6826 100644
--- a/apps/starter-kit-next/components/ui/badge/index.tsx
+++ b/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>