@umituz/react-native-settings 4.1.5 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.1.5",
+  "version": "4.2.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -90,4 +90,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/presentation/components/SettingsFooter.tsx

@@ -9,20 +9,30 @@ import { useLocalization } from "@umituz/react-native-localization";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
 export interface SettingsFooterProps {
-  /** Custom version text (optional) */
+  /** Custom version text (optional) - should include version number from app config */
   versionText?: string;
+  /** App version number from app config (e.g., "1.0.0") */
+  appVersion?: string;
 }
 
 export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   versionText,
+  appVersion,
 }) => {
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
 
-  const displayText =
-    versionText ||
-    `${t("settings.about.version")} ${t("settings.about.versionNumber")}`;
+  // If versionText is provided, use it directly
+  // Otherwise build from translated label + appVersion
+  const displayText = versionText || (appVersion
+    ? `${t("settings.footer.version")} ${appVersion}`
+    : undefined);
+
+  // Don't render if no version info available
+  if (!displayText) {
+    return null;
+  }
 
   return (
     <View style={styles.container}>

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -58,17 +58,23 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
         headerTintColor: tokens.colors.textPrimary,
     };
 
+    // Memoize SettingsScreen wrapper to prevent remounting on every render
+    const SettingsScreenWrapper = React.useMemo(() => {
+        const Wrapper = () => <SettingsScreen config={config} />;
+        Wrapper.displayName = "SettingsScreenWrapper";
+        return Wrapper;
+    }, [config]);
+
     return (
         <Stack.Navigator screenOptions={screenOptions}>
             <Stack.Screen
                 name="Settings"
+                component={SettingsScreenWrapper}
                 options={{
                     headerShown: false,
                     title: "Settings",
                 }}
-            >
-                {() => <SettingsScreen config={config} />}
-            </Stack.Screen>
+            />
 
             <Stack.Screen
                 name="Appearance"

package/src/presentation/screens/SettingsScreen.tsx

@@ -34,8 +34,10 @@ export interface SettingsScreenProps {
   };
   /** Show footer with version */
   showFooter?: boolean;
-  /** Custom footer text */
+  /** Custom footer text (overrides appVersion) */
   footerText?: string;
+  /** App version number from app config (e.g., "1.0.0") */
+  appVersion?: string;
   /** Custom sections to render */
   customSections?: CustomSettingsSection[];
   /** Show close button in header */
@@ -54,6 +56,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   userProfile,
   showFooter = true,
   footerText,
+  appVersion,
   customSections = [],
   showCloseButton = false,
   onClose,
@@ -72,9 +75,9 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   return (
     <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
       <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
-      
+
       <SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />
-      
+
       <SettingsErrorBoundary>
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -83,6 +86,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           userProfile={userProfile}
           showFooter={showFooter}
           footerText={footerText}
+          appVersion={appVersion}
           customSections={customSections}
           showCloseButton={showCloseButton}
         />

package/src/presentation/screens/components/SettingsContent.tsx

@@ -42,6 +42,7 @@ interface SettingsContentProps {
   };
   showFooter?: boolean;
   footerText?: string;
+  appVersion?: string;
   customSections?: CustomSettingsSection[];
   showCloseButton?: boolean;
 }
@@ -54,6 +55,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   userProfile,
   showFooter = true,
   footerText,
+  appVersion,
   customSections = [],
   showCloseButton = false,
 }) => {
@@ -145,7 +147,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         </View>
       )}
 
-      {showFooter && <SettingsFooter versionText={footerText} />}
+      {showFooter && <SettingsFooter versionText={footerText} appVersion={appVersion} />}
     </ScrollView>
   );
 };