@umituz/react-native-settings 4.23.80 → 4.23.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.80",
+  "version": "4.23.82",
   "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",
@@ -41,14 +41,12 @@
     "firebase": "^12.7.0"
   },
   "peerDependencies": {
-    "expo": ">=54.0.0",
     "@expo/vector-icons": ">=14.0.0",
-    "@react-native-async-storage/async-storage": ">=2.0.0",
-    "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@umituz/react-native-design-system": "*",
+    "expo": ">=54.0.0",
     "expo-device": ">=6.0.0",
     "expo-haptics": ">=15.0.0",
     "expo-localization": ">=16.0.0",
@@ -65,7 +63,7 @@
     "@expo/vector-icons": "^15.0.0",
     "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native-async-storage/async-storage": "^2.2.0",
-    "@react-native-community/datetimepicker": "^8.2.0",
+    "@react-native-community/datetimepicker": "^8.6.0",
     "@react-native-community/slider": "^5.1.1",
     "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^7.1.26",
@@ -77,7 +75,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.58",
+    "@umituz/react-native-design-system": "*",
     "@umituz/react-native-firebase": "^1.13.102",
     "@umituz/react-native-sentry": "*",
     "eslint": "^8.57.0",
@@ -115,7 +113,6 @@
     "react-native-reanimated": "^4.2.1",
     "react-native-safe-area-context": "^5.6.2",
     "react-native-svg": "^15.15.1",
-    "rn-emoji-keyboard": "^1.7.0",
     "typescript": "^5.3.0",
     "zustand": "^5.0.9"
   },

package/src/domains/about/presentation/screens/AboutScreen.tsx

@@ -4,8 +4,10 @@
  * Fully configurable and generic
  * Optimized for performance and memory safety
  */
-import React from 'react';
-import { AboutScreenContainer } from './AboutScreenContainer';
+import { ScreenLayout, NavigationHeader, useAppDesignTokens, useAppNavigation, AtomicText, AtomicSpinner } from '@umituz/react-native-design-system';
+import { useLocalization } from '../../../localization';
+import { useAboutInfo } from '../hooks/useAboutInfo';
+import { AboutScreenContent } from './AboutScreenContent';
 
 export interface AboutScreenProps {
   /** Configuration for the about screen */
@@ -29,5 +31,49 @@ export interface AboutScreenProps {
 }
 
 export const AboutScreen: React.FC<AboutScreenProps> = (props) => {
-  return <AboutScreenContainer {...props} />;
+  const { config, testID = 'about-screen' } = props;
+  const tokens = useAppDesignTokens();
+  const navigation = useAppNavigation();
+  const { t } = useLocalization();
+
+  const { appInfo, loading, error } = useAboutInfo({
+    autoInit: true,
+    initialConfig: config,
+  });
+
+  const header = (
+    <NavigationHeader 
+      title={t("settings.about.title")} 
+      onBackPress={() => navigation.goBack()} 
+    />
+  );
+
+  if (loading) {
+    return (
+      <ScreenLayout header={header} testID={testID}>
+        <AtomicSpinner fullContainer size="lg" />
+      </ScreenLayout>
+    );
+  }
+
+  if (error || !appInfo) {
+    const errorText = error ? `${config.texts?.errorPrefix || 'Error:'} ${error}` : (config.texts?.noInfo || 'No info available');
+    return (
+      <ScreenLayout header={header} testID={testID}>
+        <AtomicText type="bodyMedium" color="error" style={{ textAlign: 'center', marginTop: 20 }}>
+          {errorText}
+        </AtomicText>
+      </ScreenLayout>
+    );
+  }
+
+  return (
+    <ScreenLayout header={header} testID={testID}>
+      <AboutScreenContent
+        {...props}
+        appInfo={appInfo}
+        _tokens={tokens}
+      />
+    </ScreenLayout>
+  );
 };

package/src/domains/about/presentation/screens/AboutScreenContent.tsx

@@ -7,7 +7,6 @@ import React, { useMemo, useCallback } from 'react';
 import {
   View,
   StyleSheet,
-  ScrollView,
 } from 'react-native';
 import { AboutHeader } from '../components/AboutHeader';
 import { AboutContent } from '../components/AboutContent';
@@ -98,15 +97,14 @@ export const AboutScreenContent: React.FC<AboutScreenContentProps> = ({
   }, [containerStyle, colors.backgroundPrimary, styles]);
 
   return (
-    <ScrollView
+    <View
       style={containerStyles}
       testID={testID}
-      contentContainerStyle={{ paddingBottom: 32 }}
     >
       {renderHeader()}
       {renderContent()}
       {renderFooter()}
-    </ScrollView>
+    </View>
   );
 };
 

package/src/domains/localization/index.ts

@@ -1,5 +1,5 @@
-// Providers
-export { LocalizationProvider } from './presentation/providers/LocalizationProvider';
+// Managers
+export { LocalizationManager } from './presentation/providers/LocalizationManager';
 
 // Hooks
 export { useLocalization } from './infrastructure/hooks/useLocalization';

package/src/domains/localization/presentation/providers/{LocalizationProvider.tsx → LocalizationManager.tsx}

@@ -13,7 +13,7 @@ interface LocalizationProviderProps {
   defaultLanguage?: string;
 }
 
-export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
+export const LocalizationManager: React.FC<LocalizationProviderProps> = ({
   children,
   translations,
   defaultLanguage = "en-US",

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx

@@ -43,7 +43,7 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
     }
     await handleLanguageSelect(code, () => {
       if (__DEV__) {
-        console.log('[LanguageSelectionScreen] Navigating back using context navigation');
+        console.log('[LanguageSelectionScreen] Navigating back using standard navigation');
       }
       navigation.goBack();
     });

package/src/presentation/screens/SettingsScreen.tsx

@@ -8,10 +8,9 @@ import {
   ScreenLayout,
   useAppNavigation,
 } from "@umituz/react-native-design-system";
+import { useSettingsScreen } from "./hooks/useSettingsScreen";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
-import { normalizeSettingsConfig } from "./utils/normalizeConfig";
-import { useFeatureDetection } from "./hooks/useFeatureDetection";
 import type { SettingsConfig, CustomSettingsSection } from "./types";
 import type { DevSettingsProps } from "../../domains/dev";
 
@@ -55,63 +54,44 @@ export interface SettingsScreenProps {
   showHeader?: boolean;
 }
 
-export const SettingsScreen: React.FC<SettingsScreenProps> = ({
-  children,
-  config = {},
-  showUserProfile,
-  userProfile,
-  showFooter = true,
-  footerText,
-  appVersion,
-  customSections = [],
-  showCloseButton = false,
-  showHeader = true,
-  onClose,
-  featureOptions,
-  devSettings,
-  gamificationConfig,
-}) => {
-  const navigation = useAppNavigation();
+export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
+  const {
+    children,
+    config = {},
+    showUserProfile,
+    userProfile,
+    showFooter = true,
+    footerText,
+    appVersion: providedVersion,
+    customSections = [],
+    showCloseButton = false,
+    showHeader = true,
+    onClose,
+    featureOptions,
+    devSettings,
+    gamificationConfig,
+  } = props;
 
-  // Memoize config normalization to prevent unnecessary recalculations
-  const normalizedConfig = React.useMemo(
-    () => normalizeSettingsConfig(config),
-    [config]
-  );
-
-  // Feature detection hook (must be called at top level)
-  const detectedFeatures = useFeatureDetection(normalizedConfig, navigation, featureOptions);
-
-  // Memoize features to prevent unnecessary recalculations
-  const features = React.useMemo(
-    () => detectedFeatures,
-    [detectedFeatures]
-  );
-
-  // Determine if user profile should be shown (explicit prop takes priority, then config)
-  const shouldShowUserProfile = showUserProfile ?? features.userProfile;
+  const {
+    normalizedConfig,
+    features,
+    shouldShowUserProfile,
+    appVersion,
+    handleClose,
+  } = useSettingsScreen({
+    config,
+    showUserProfile,
+    featureOptions,
+    appVersion: providedVersion,
+    onClose,
+  });
 
-  // Workaround: Use conditional rendering with type assertion
-  if (showHeader) {
-    return <ScreenLayout header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}>
-        {children ?? (
-          <SettingsContent
-            normalizedConfig={normalizedConfig}
-            features={features}
-            showUserProfile={shouldShowUserProfile}
-            userProfile={userProfile}
-            showFooter={showFooter}
-            footerText={footerText}
-            appVersion={appVersion}
-            customSections={customSections}
-            devSettings={devSettings}
-            gamificationConfig={gamificationConfig}
-          />
-        )}
-    </ScreenLayout>;
-  }
+  const header = showHeader ? (
+    <SettingsHeader showCloseButton={showCloseButton} onClose={handleClose} />
+  ) : undefined;
 
-  return <ScreenLayout>
+  return (
+    <ScreenLayout header={header}>
       {children ?? (
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -126,5 +106,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           gamificationConfig={gamificationConfig}
         />
       )}
-  </ScreenLayout>;
+    </ScreenLayout>
+  );
 };

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

@@ -3,9 +3,7 @@
  * Handles close button functionality
  */
 
-import React from "react";
-import { View, Pressable, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicIcon, AtomicText, useAppNavigation } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicIcon, useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
 import { useLocalization } from "../../../domains/localization";
 
 interface SettingsHeaderProps {
@@ -29,41 +27,32 @@ export const SettingsHeader: React.FC<SettingsHeaderProps> = ({
     }
   };
 
+  const rightElement = showCloseButton ? (
+    <Pressable
+      onPress={handleClose}
+      style={({ pressed }) => [
+        {
+          width: 44,
+          height: 44,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
+          borderRadius: tokens.borders.radius.full,
+        },
+      ]}
+      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+    >
+      <AtomicIcon name="close-outline" size="lg" color="textPrimary" />
+    </Pressable>
+  ) : undefined;
+
   return (
-    <View style={[styles.container, { padding: tokens.spacing.lg }]}>
-      <AtomicText type="headlineLarge">
-        {t('settings.title')}
-      </AtomicText>
-      
-      {showCloseButton && (
-        <Pressable
-          onPress={handleClose}
-          style={({ pressed }) => [
-            styles.closeButton,
-            {
-              backgroundColor: pressed ? tokens.colors.surfaceVariant : tokens.colors.surface,
-              borderRadius: tokens.borders.radius.full,
-            },
-          ]}
-          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-        >
-          <AtomicIcon name="close-outline" size="lg" color="textPrimary" />
-        </Pressable>
-      )}
-    </View>
+    <NavigationHeader
+      title={t('settings.title')}
+      rightElement={rightElement}
+      // If NOT showing close button, we might want a back button? 
+      // But usually Settings is a root screen in a modal or stack.
+      onBackPress={!showCloseButton ? handleClose : undefined}
+    />
   );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  closeButton: {
-    width: 44,
-    height: 44,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
+};

package/src/presentation/screens/hooks/useSettingsScreen.ts

@@ -0,0 +1,64 @@
+/**
+ * useSettingsScreen Hook
+ * Refactored: Extracted business logic from SettingsScreen component
+ */
+
+import { useMemo, useCallback } from "react";
+import { useAppNavigation } from "@umituz/react-native-design-system";
+import { normalizeSettingsConfig } from "../utils/normalizeConfig";
+import { useFeatureDetection } from "./useFeatureDetection";
+import { getAppVersion } from "../../../utils/appUtils";
+import type { SettingsConfig } from "../types";
+
+export interface UseSettingsScreenParams {
+  config?: SettingsConfig;
+  showUserProfile?: boolean;
+  featureOptions?: {
+    notificationServiceAvailable?: boolean;
+  };
+  appVersion?: string;
+  onClose?: () => void;
+}
+
+export function useSettingsScreen({
+  config = {},
+  showUserProfile,
+  featureOptions,
+  appVersion: providedVersion,
+  onClose,
+}: UseSettingsScreenParams) {
+  const navigation = useAppNavigation();
+
+  // Normalize config
+  const normalizedConfig = useMemo(
+    () => normalizeSettingsConfig(config),
+    [config]
+  );
+
+  // Feature detection
+  const features = useFeatureDetection(
+    normalizedConfig,
+    navigation,
+    featureOptions
+  );
+
+  const shouldShowUserProfile = showUserProfile ?? features.userProfile;
+
+  const appVersion = providedVersion || getAppVersion();
+
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    } else {
+      navigation.goBack();
+    }
+  }, [onClose, navigation]);
+
+  return {
+    normalizedConfig,
+    features,
+    shouldShowUserProfile,
+    appVersion,
+    handleClose,
+  };
+}

package/src/utils/appUtils.ts

@@ -0,0 +1,36 @@
+/**
+ * App and Platform Utilities
+ */
+import { Platform } from "react-native";
+import Constants from "expo-constants";
+
+/**
+ * Gets the current app version from Expo constants
+ */
+export function getAppVersion(): string {
+  const version = Constants.expoConfig?.version ?? Constants.manifest2?.extra?.expoClient?.version;
+  if (!version) {
+    // Return a default if not found
+    return "1.0.0";
+  }
+  return version;
+}
+
+/**
+ * Validates if the current platform is supported
+ */
+export function validatePlatform(): "ios" | "android" {
+  const platform = Platform.OS;
+  if (platform !== "ios" && platform !== "android") {
+     // Default to android for consistency if something goes wrong in detection
+     return "android";
+  }
+  return platform;
+}
+
+/**
+ * Checks if the app is currently in development mode
+ */
+export function isDev(): boolean {
+  return __DEV__;
+}

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./appUtils";

package/src/domains/about/presentation/screens/AboutScreenContainer.tsx

@@ -1,109 +0,0 @@
-/**
- * AboutScreen Container Component
- * Handles business logic and state management for About screen
- */
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { AboutScreenContent } from './AboutScreenContent';
-import { useAboutInfo } from '../hooks/useAboutInfo';
-import { useAppDesignTokens, AtomicText, type DesignTokens } from '@umituz/react-native-design-system';
-import type { AboutScreenProps } from './AboutScreen';
-
-export const AboutScreenContainer: React.FC<AboutScreenProps> = ({
-  config,
-  containerStyle,
-  headerStyle,
-  titleStyle,
-  versionStyle,
-  showHeader = true,
-  headerComponent,
-  footerComponent,
-  testID,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  const { appInfo, loading, error } = useAboutInfo({
-    autoInit: true,
-    initialConfig: config,
-  });
-
-  const containerStyles = React.useMemo(() => {
-    return [
-      styles.container,
-      { backgroundColor: tokens.colors.backgroundPrimary },
-      containerStyle
-    ];
-  }, [containerStyle, tokens.colors.backgroundPrimary, styles]);
-
-  const texts = config.texts || {};
-
-  if (loading) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="textSecondary"
-          style={styles.statusText}
-        >
-          {texts.loading}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="error"
-          style={styles.statusText}
-        >
-          {texts.errorPrefix} {error}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  if (!appInfo) {
-    return (
-      <View style={containerStyles} testID={testID}>
-        <AtomicText
-          type="bodyMedium"
-          color="textSecondary"
-          style={styles.statusText}
-        >
-          {texts.noInfo}
-        </AtomicText>
-      </View>
-    );
-  }
-
-  return (
-    <AboutScreenContent
-      appInfo={appInfo}
-      config={config}
-      containerStyle={containerStyle}
-      headerStyle={headerStyle}
-      titleStyle={titleStyle}
-      versionStyle={versionStyle}
-      showHeader={showHeader}
-      headerComponent={headerComponent}
-      footerComponent={footerComponent}
-      testID={testID}
-      _tokens={tokens}
-    />
-  );
-};
-
-const getStyles = (tokens: DesignTokens) => StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  statusText: {
-    textAlign: 'center',
-    fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-    marginTop: 20,
-  },
-});