@umituz/react-native-settings 4.20.10 → 4.20.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.10",
+  "version": "4.20.16",
   "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/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,36 +64,51 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   const themeSectionMemo = useMemo(() => {
     if (!showThemeSection) return null;
 
-    const themes: ThemeOptionConfig[] = [];
+    const defaultLightMode: ThemeOptionConfig = {
+      mode: "light",
+      title: "Light Mode",
+      subtitle: "Bright and clean",
+      description: "Perfect for daytime use with vibrant colors.",
+      features: ["Bright colors", "High contrast", "Easy on eyes during day"],
+    };
 
-    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
-      });
-    }
+    const defaultDarkMode: ThemeOptionConfig = {
+      mode: "dark",
+      title: "Dark Mode",
+      subtitle: "Easy on eyes",
+      description: "Ideal for low-light environments.",
+      features: ["Reduced eye strain", "Better battery life", "Comfortable at night"],
+    };
 
-    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[] = [
+      texts?.lightMode
+        ? {
+            mode: "light",
+            title: texts.lightMode.title,
+            subtitle: texts.lightMode.subtitle,
+            description: texts.lightMode.description,
+            features: texts.lightMode.features,
+          }
+        : defaultLightMode,
+      texts?.darkMode
+        ? {
+            mode: "dark",
+            title: texts.darkMode.title,
+            subtitle: texts.darkMode.subtitle,
+            description: texts.darkMode.description,
+            features: texts.darkMode.features,
+          }
+        : defaultDarkMode,
+    ];
 
     return (
       <ThemeModeSection
         tokens={tokens}
         themeMode={themeMode}
         onThemeSelect={handleThemeSelect}
-        title={texts?.themeSectionTitle}
+        title={texts?.themeSectionTitle ?? "Theme Mode"}
         description={texts?.themeSectionDescription}
-        themes={themes.length > 0 ? themes : undefined}
+        themes={themes}
       />
     );
   }, [

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

@@ -83,9 +83,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 +121,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/components/sections/FeatureSettingsSection.tsx

@@ -30,7 +30,7 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
   const currentLanguageData = getLanguageByCode(currentLanguage);
   const languageDisplayName = currentLanguageData 
     ? `${currentLanguageData.flag} ${currentLanguageData.nativeName}`
-    : currentLanguage || "English";
+    : currentLanguage;
 
   return (
     <>

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 {