@umituz/react-native-settings 4.20.11 → 4.20.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.11",
+  "version": "4.20.17",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -15,7 +15,8 @@ export interface ThemeOptionConfig {
   title: string;
   subtitle?: string;
   description?: string;
-  features: string[];
+  features?: string[];
+  featuresTitle?: string;
 }
 
 export interface ThemeModeSectionProps {
@@ -58,9 +59,10 @@ export const ThemeModeSection: React.FC<ThemeModeSectionProps> = ({
         key={theme.mode}
         mode={theme.mode}
         title={theme.title}
-        subtitle={theme.subtitle || ""}
-        description={theme.description || ""}
+        subtitle={theme.subtitle}
+        description={theme.description}
         features={theme.features}
+        featuresTitle={theme.featuresTitle}
         isSelected={themeMode === theme.mode}
         onSelect={() => handleThemeSelect(theme.mode)}
       />

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

@@ -14,9 +14,10 @@ import type { ThemeMode } from "../../types";
 interface ThemeOptionProps {
   mode: ThemeMode;
   title: string;
-  subtitle: string;
-  description: string;
-  features: string[];
+  subtitle?: string;
+  description?: string;
+  features?: string[];
+  featuresTitle?: string;
   isSelected: boolean;
   onSelect: () => void;
 }
@@ -27,6 +28,7 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
   subtitle,
   description,
   features,
+  featuresTitle,
   isSelected,
   onSelect,
 }) => {
@@ -47,9 +49,11 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
           <AtomicText type="titleLarge" color="primary">
             {title}
           </AtomicText>
-          <AtomicText type="bodyMedium" color="secondary">
-            {subtitle}
-          </AtomicText>
+          {subtitle ? (
+            <AtomicText type="bodyMedium" color="secondary">
+              {subtitle}
+            </AtomicText>
+          ) : null}
         </View>
         <AtomicIcon
           name={isSelected ? "checkmark-circle-outline" : "ellipse-outline"}
@@ -58,33 +62,39 @@ export const ThemeOption: React.FC<ThemeOptionProps> = ({
         />
       </View>
 
-      <AtomicText
-        type="bodyMedium"
-        color="secondary"
-        style={styles.description}
-      >
-        {description}
-      </AtomicText>
-
-      <View style={styles.featuresContainer}>
+      {description ? (
         <AtomicText
-          type="labelLarge"
-          color="primary"
-          style={styles.featuresTitle}
+          type="bodyMedium"
+          color="secondary"
+          style={styles.description}
         >
-          Features
+          {description}
         </AtomicText>
-        {features.map((feature, index) => (
-          <AtomicText
-            key={index}
-            type="bodySmall"
-            color="secondary"
-            style={styles.feature}
-          >
-            • {feature}
-          </AtomicText>
-        ))}
-      </View>
+      ) : null}
+
+      {features && features.length > 0 ? (
+        <View style={styles.featuresContainer}>
+          {featuresTitle ? (
+            <AtomicText
+              type="labelLarge"
+              color="primary"
+              style={styles.featuresTitle}
+            >
+              {featuresTitle}
+            </AtomicText>
+          ) : null}
+          {features.map((feature, index) => (
+            <AtomicText
+              key={index}
+              type="bodySmall"
+              color="secondary"
+              style={styles.feature}
+            >
+              • {feature}
+            </AtomicText>
+          ))}
+        </View>
+      ) : null}
     </TouchableOpacity>
   );
 };

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -64,27 +64,24 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   const themeSectionMemo = useMemo(() => {
     if (!showThemeSection) return null;
 
-    const themes: ThemeOptionConfig[] = [];
-
-    if (texts?.lightMode) {
-      themes.push({
-        mode: 'light' as const,
-        title: texts.lightMode.title,
-        subtitle: texts.lightMode.subtitle,
-        description: texts.lightMode.description,
-        features: texts.lightMode.features
-      });
-    }
-
-    if (texts?.darkMode) {
-      themes.push({
-        mode: 'dark' as const,
-        title: texts.darkMode.title,
-        subtitle: texts.darkMode.subtitle,
-        description: texts.darkMode.description,
-        features: texts.darkMode.features
-      });
-    }
+    const themes: ThemeOptionConfig[] = [
+      {
+        mode: "light",
+        title: texts?.lightMode?.title ?? "settings.themeMode.light.title",
+        subtitle: texts?.lightMode?.subtitle,
+        description: texts?.lightMode?.description,
+        features: texts?.lightMode?.features,
+        featuresTitle: texts?.featuresSectionTitle,
+      },
+      {
+        mode: "dark",
+        title: texts?.darkMode?.title ?? "settings.themeMode.dark.title",
+        subtitle: texts?.darkMode?.subtitle,
+        description: texts?.darkMode?.description,
+        features: texts?.darkMode?.features,
+        featuresTitle: texts?.featuresSectionTitle,
+      },
+    ];
 
     return (
       <ThemeModeSection
@@ -93,7 +90,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
         onThemeSelect={handleThemeSelect}
         title={texts?.themeSectionTitle}
         description={texts?.themeSectionDescription}
-        themes={themes.length > 0 ? themes : undefined}
+        themes={themes}
       />
     );
   }, [
@@ -105,6 +102,7 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     texts?.themeSectionDescription,
     texts?.lightMode,
     texts?.darkMode,
+    texts?.featuresSectionTitle,
   ]);
 
   const colorsSectionMemo = useMemo(() => {

package/src/domains/appearance/types/index.ts

@@ -44,6 +44,7 @@ export interface AppearanceTexts {
   subtitle?: string;
   themeSectionTitle?: string;
   themeSectionDescription?: string;
+  featuresSectionTitle?: string;
   colorsSectionTitle?: string;
   colorsSectionDescription?: string;
   previewSectionTitle?: string;

package/src/domains/feedback/presentation/components/SupportSection.tsx

@@ -15,6 +15,7 @@ export interface FeedbackConfig {
     description?: string;
     initialType?: FeedbackType;
     onSubmit?: (data: { type: any; rating: number; description: string; title: string }) => Promise<void>;
+    onPress?: () => void;
 }
 
 export interface RatingConfig {
@@ -83,9 +84,20 @@ export const SupportSection: React.FC<SupportSectionProps> = ({
         }
 
         if (config?.storeUrl) {
-            const supported = await Linking.canOpenURL(config.storeUrl);
-            if (supported) {
-                await Linking.openURL(config.storeUrl);
+            try {
+                // Safely handle URL for App Store - itunes.apple.com is more reliable for deep links
+                let url = config.storeUrl;
+                if (url.includes('apps.apple.com')) {
+                    url = url.replace('apps.apple.com', 'itunes.apple.com');
+                }
+                
+                // Try opening the modified URL
+                await Linking.openURL(url);
+            } catch (error) {
+                // Final fallback to original URL
+                if (config.storeUrl) {
+                    Linking.openURL(config.storeUrl).catch(() => {});
+                }
             }
         }
     }, [ratingConfig.config]);
@@ -110,7 +122,7 @@ export const SupportSection: React.FC<SupportSectionProps> = ({
                         {showFeedback && feedbackConfig.config?.description && renderItem({
                             title: feedbackConfig.config.description,
                             icon: "mail",
-                            onPress: () => setModalVisible(true),
+                            onPress: feedbackConfig.config.onPress || (() => setModalVisible(true)),
                             isLast: !showRating
                         })}
 

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -5,13 +5,14 @@
  * Can be extended by apps to add custom screens
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
-import type { SettingsConfig, CustomSettingsSection } from "../screens/types";
+import type { SettingsConfig, CustomSettingsSection, AppearanceConfig } from "../screens/types";
 import type { DevSettingsProps } from "../components/DevSettingsSection";
+import type { AppearanceTexts } from "../../domains/appearance/types";
 
 // Default param list - can be extended by apps
 export type SettingsStackParamList = {

package/src/presentation/screens/types/FeatureConfig.ts

@@ -3,7 +3,7 @@
  * Core types for feature visibility and configuration
  */
 
-import type { ComponentType, ReactNode } from "react";
+import type { AppearanceTexts } from "../../../domains/appearance/types";
 
 /**
  * Feature visibility configuration
@@ -33,6 +33,8 @@ export interface AppearanceConfig {
   sectionTitle?: string;
   /** Default route name when no custom route provided */
   defaultRoute?: string;
+  /** Appearance screen texts (theme mode labels, descriptions, etc.) */
+  texts?: AppearanceTexts;
 }
 
 /**
@@ -169,6 +171,8 @@ export interface FeedbackConfig {
   initialType?: FeedbackType;
   /** Feedback submission handler */
   onSubmit?: (data: { type: any; rating: number; description: string; title: string }) => Promise<void>;
+  /** Custom handler to open feedback screen (overrides default modal) */
+  onPress?: () => void;
 }
 
 export interface FAQConfig {