@umituz/react-native-settings 4.1.6 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.1.6",
+  "version": "4.3.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -25,6 +25,11 @@ export interface SettingsStackNavigatorProps {
      */
     config?: SettingsConfig;
 
+    /**
+     * App version number from app config (e.g., "1.0.0")
+     */
+    appVersion?: string;
+
     /**
      * Additional screens to register
      * Apps can add their own screens here
@@ -40,6 +45,7 @@ const Stack = createStackNavigator<SettingsStackParamList>();
 
 export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     config = {},
+    appVersion,
     additionalScreens = [],
 }) => {
     const tokens = useAppDesignTokens();
@@ -60,10 +66,10 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 
     // Memoize SettingsScreen wrapper to prevent remounting on every render
     const SettingsScreenWrapper = React.useMemo(() => {
-        const Wrapper = () => <SettingsScreen config={config} />;
+        const Wrapper = () => <SettingsScreen config={config} appVersion={appVersion} />;
         Wrapper.displayName = "SettingsScreenWrapper";
         return Wrapper;
-    }, [config]);
+    }, [config, appVersion]);
 
     return (
         <Stack.Navigator screenOptions={screenOptions}>

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>
   );
 };