@umituz/react-native-settings 4.23.50 → 4.23.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.50",
+  "version": "4.23.52",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -77,7 +77,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@umituz/react-native-auth": "^3.6.49",
-    "@umituz/react-native-design-system": "^4.23.49",
+    "@umituz/react-native-design-system": "^4.23.50",
     "@umituz/react-native-firebase": "^1.13.102",
     "@umituz/react-native-sentry": "*",
     "eslint": "^8.57.0",

package/src/domains/appearance/presentation/components/CustomColorsSection.tsx

@@ -81,12 +81,6 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
   // Memoize styles to prevent unnecessary re-creation
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
-  // Memoize hasCustomColors check to prevent unnecessary re-renders
-  const hasCustomColors = useMemo(() => 
-    Object.keys(localCustomColors).length > 0,
-    [localCustomColors]
-  );
-
   // Memoize color fields to prevent unnecessary re-renders
   const colorFieldsMemo = useMemo(() => colorFields, [colorFields]);
 
@@ -123,14 +117,14 @@ export const CustomColorsSection: React.FC<CustomColorsSectionProps> = ({
 
   // Memoize reset button to prevent unnecessary re-renders
   const resetButton = useMemo(() => {
-    if (!showResetButton || !hasCustomColors) return null;
-    
+    if (!showResetButton) return null;
+
     return (
       <AtomicButton variant="outline" size="sm" onPress={handleResetColors}>
-        {resetButtonText}
+        {resetButtonText || "Reset"}
       </AtomicButton>
     );
-  }, [showResetButton, hasCustomColors, resetButtonText, handleResetColors]);
+  }, [showResetButton, resetButtonText, handleResetColors]);
 
   return (
     <View style={styles.section}>

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -38,6 +38,8 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   devSettings,
   customSections = [],
   showHeader = true,
+  showCloseButton = false,
+  onClose,
   gamificationConfig,
 }) => {
   const tokens = useAppDesignTokens();
@@ -85,6 +87,8 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
             devSettings={devSettings}
             customSections={customSections}
             showHeader={showHeader}
+            showCloseButton={showCloseButton}
+            onClose={onClose}
           />
         ),
       },
@@ -172,6 +176,8 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
   }, [
     t,
     showHeader,
+    showCloseButton,
+    onClose,
     config,
     appInfo.version,
     showUserProfile,

package/src/presentation/navigation/components/wrappers/SettingsScreenWrapper.tsx

@@ -12,6 +12,8 @@ export interface SettingsScreenWrapperProps {
   devSettings: any;
   customSections: any[];
   showHeader?: boolean;
+  showCloseButton?: boolean;
+  onClose?: () => void;
 }
 
 export const SettingsScreenWrapper: React.FC<SettingsScreenWrapperProps> = ({
@@ -22,6 +24,8 @@ export const SettingsScreenWrapper: React.FC<SettingsScreenWrapperProps> = ({
   devSettings,
   customSections,
   showHeader,
+  showCloseButton,
+  onClose,
 }) => (
   <SettingsScreen
     config={config}
@@ -31,5 +35,7 @@ export const SettingsScreenWrapper: React.FC<SettingsScreenWrapperProps> = ({
     devSettings={devSettings}
     customSections={customSections}
     showHeader={showHeader}
+    showCloseButton={showCloseButton}
+    onClose={onClose}
   />
 );

package/src/presentation/navigation/types.ts

@@ -99,5 +99,9 @@ export interface SettingsStackNavigatorProps {
   devSettings?: DevSettingsProps;
   customSections?: CustomSettingsSection[];
   showHeader?: boolean;
+  /** Show close button in header (useful for modal presentation) */
+  showCloseButton?: boolean;
+  /** Custom close handler */
+  onClose?: () => void;
   gamificationConfig?: import("../../domains/gamification").GamificationSettingsConfig;
 }