@umituz/react-native-settings 4.23.81 → 4.23.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.81",
+  "version": "4.23.83",
   "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",

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/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -14,7 +14,13 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens, withAlpha, ScreenLayout } from '@umituz/react-native-design-system';
+import { 
+  useAppDesignTokens, 
+  withAlpha, 
+  ScreenLayout, 
+  useAppNavigation, 
+  NavigationHeader 
+} from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import type { IconName } from '@umituz/react-native-design-system';
 import { useLocalization } from '../../../localization';
@@ -46,12 +52,20 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
   const displayTitle = title || t(titleKey);
   const displayContent = content || t(contentKey);
 
+  const navigation = useAppNavigation();
+
   return (
     <ScreenLayout
       scrollable={true}
       edges={['bottom']}
       contentContainerStyle={styles.scrollContent}
       hideScrollIndicator={false}
+      header={
+        <NavigationHeader
+          title={displayTitle}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
     >
       {/* Icon Header */}
       <View style={styles.iconHeader}>

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
-import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -45,6 +45,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   renderHeader,
   styles: customStyles,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const { width: windowWidth } = useWindowDimensions();
   const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
@@ -67,6 +68,21 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     [tokens]
   );
 
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const header = renderHeader ? renderHeader({ onBack: handleBack }) : (
+    <NavigationHeader
+      title={headerTitle}
+      onBackPress={handleBack}
+    />
+  );
+
   const renderContent = () => {
     if (searchQuery && !hasResults) {
       return (
@@ -81,13 +97,6 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     return (
       <View style={{ flex: 1 }}>
         <View style={[styles.header, customStyles?.header]}>
-          <AtomicText
-            type="headlineMedium"
-            color="textPrimary"
-            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
-          >
-            {headerTitle}
-          </AtomicText>
           <FAQSearchBar
             value={searchQuery}
             onChangeText={setSearchQuery}
@@ -116,23 +125,16 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     );
   };
 
-  if (renderHeader && onBack) {
-    return (
-      <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
-        <View style={[styles.container, customStyles?.container]}>
-          <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
-            {renderHeader({ onBack })}
-          </View>
-          {renderContent()}
-        </View>
-      </View>
-    );
-  }
-
   return (
-    <ScreenLayout edges={['bottom']} scrollable={false}>
+    <ScreenLayout 
+      edges={['bottom']} 
+      scrollable={false}
+      header={header}
+    >
       <View style={[styles.container, customStyles?.container]}>
-        {renderContent()}
+        <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth, flex: 1 }}>
+          {renderContent()}
+        </View>
       </View>
     </ScreenLayout>
   );

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import type { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export const getFeedbackFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    typeContainer: {
+        marginBottom: 24,
+    },
+    typeScroll: {
+        gap: 8,
+    },
+    typeButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderWidth: 1,
+        gap: 6,
+    },
+    ratingContainer: {
+        alignItems: "center",
+        marginBottom: 24,
+    },
+    stars: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    starButton: {
+        padding: 4,
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    textArea: {
+        textAlignVertical: "top",
+        minHeight: 120,
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+    },
+    errorText: {
+        marginTop: 8,
+    },
+    submitButton: {
+        width: "100%",
+    },
+});

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

@@ -8,6 +8,8 @@ import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
+import { getFeedbackFormStyles as getStyles } from "./FeedbackForm.styles";
+
 export interface FeedbackFormProps {
     onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
     texts: {
@@ -151,6 +153,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                             color: tokens.colors.textPrimary,
                             backgroundColor: tokens.colors.surface,
                             borderColor: error ? tokens.colors.error : tokens.colors.border,
+                            fontSize: tokens.typography.bodyMedium.fontSize,
                         }
                     ]}
                 />
@@ -176,52 +179,3 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-        width: "100%",
-    },
-    typeContainer: {
-        marginBottom: 24,
-    },
-    typeScroll: {
-        gap: 8,
-    },
-    typeButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 20,
-        borderWidth: 1,
-        gap: 6,
-    },
-    ratingContainer: {
-        alignItems: "center",
-        marginBottom: 24,
-    },
-    stars: {
-        flexDirection: "row",
-        gap: 8,
-    },
-    starButton: {
-        padding: 4,
-    },
-    inputContainer: {
-        marginBottom: 24,
-    },
-    textArea: {
-        textAlignVertical: "top",
-        minHeight: 120,
-        borderWidth: 1,
-        borderRadius: 8,
-        padding: 12,
-        fontSize: tokens.typography.bodyMedium.fontSize,
-    },
-    errorText: {
-        marginTop: 8,
-    },
-    submitButton: {
-        width: "100%",
-    },
-});

package/src/domains/gamification/components/GamificationScreen/GamificationScreen.tsx

@@ -6,10 +6,9 @@
 
 import React from "react";
 import { View, ScrollView } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
-import { Header } from "./Header";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
 import { styles } from "./styles";
@@ -39,6 +38,7 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   subtextColor,
   headerComponent,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
   // Use tokens for fallbacks
@@ -48,75 +48,72 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
 
+  const header = (
+    <NavigationHeader
+      title={title}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
+    <ScreenLayout
+      header={header}
+      contentContainerStyle={styles.scrollContent}
+      hideScrollIndicator={false}
+    >
       {headerComponent}
 
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Header */}
-        <Header
-          title={title}
-          headerStyle={headerStyle}
-          titleStyle={titleStyle}
+      {/* Level Progress */}
+      <View style={styles.section}>
+        <LevelProgress
+          {...levelProps}
+          primaryColor={finalAccentColor}
+          backgroundColor={finalCardBackgroundColor}
           textColor={finalTextColor}
+          subtextColor={finalSubtextColor}
         />
+      </View>
 
-        {/* Level Progress */}
+      {/* Streak (if provided) */}
+      {streakProps && (
         <View style={styles.section}>
-          <LevelProgress
-            {...levelProps}
+          <AtomicText
+            style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
+          >
+            {streakTitle}
+          </AtomicText>
+          <StreakDisplay
+            {...streakProps}
             primaryColor={finalAccentColor}
             backgroundColor={finalCardBackgroundColor}
             textColor={finalTextColor}
             subtextColor={finalSubtextColor}
           />
         </View>
+      )}
 
-        {/* Streak (if provided) */}
-        {streakProps && (
-          <View style={styles.section}>
-            <AtomicText
-              style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
-            >
-              {streakTitle}
-            </AtomicText>
-            <StreakDisplay
-              {...streakProps}
-              primaryColor={finalAccentColor}
-              backgroundColor={finalCardBackgroundColor}
-              textColor={finalTextColor}
-              subtextColor={finalSubtextColor}
-            />
-          </View>
-        )}
-
-        {/* Stats Grid */}
-        <StatsGrid
-          statsTitle={statsTitle}
-          stats={stats}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
+      {/* Stats Grid */}
+      <StatsGrid
+        statsTitle={statsTitle}
+        stats={stats}
+        accentColor={finalAccentColor}
+        cardBackgroundColor={finalCardBackgroundColor}
+        textColor={finalTextColor}
+        subtextColor={finalSubtextColor}
+        sectionTitleStyle={sectionTitleStyle}
+      />
 
-        {/* Achievements */}
-        <AchievementsList
-          achievementsTitle={achievementsTitle}
-          achievements={achievements}
-          emptyAchievementsText={emptyAchievementsText}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
-      </ScrollView>
-    </View>
+      {/* Achievements */}
+      <AchievementsList
+        achievementsTitle={achievementsTitle}
+        achievements={achievements}
+        emptyAchievementsText={emptyAchievementsText}
+        accentColor={finalAccentColor}
+        cardBackgroundColor={finalCardBackgroundColor}
+        textColor={finalTextColor}
+        subtextColor={finalSubtextColor}
+        sectionTitleStyle={sectionTitleStyle}
+      />
+    </ScreenLayout>
   );
 };

package/src/domains/legal/presentation/screens/LegalContentScreen.tsx

@@ -9,6 +9,7 @@ import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
 import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
 
 export interface LegalContentScreenProps {
   content?: string;
@@ -34,6 +35,7 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
   createStyles,
 }) => {
   const tokens = useAppDesignTokens();
+  const navigation = useAppNavigation();
 
   const styles = React.useMemo(() => {
     const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
@@ -101,17 +103,15 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
       testID={testID}
       scrollable={true}
       hideScrollIndicator={false}
+      header={
+        <NavigationHeader
+          title={title}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
       contentContainerStyle={styles.scrollContent}
     >
       <View style={styles.content}>
-        <AtomicText
-          type="headlineLarge"
-          color="primary"
-          style={styles.title}
-        >
-          {title}
-        </AtomicText>
-
         {contentSection}
       </View>
     </ScreenLayout>

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { ScreenLayout } from "@umituz/react-native-design-system";
+import { ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
 import { LegalScreenHeader } from "../components/LegalScreenHeader";
 import { LegalDocumentsList } from "../components/LegalDocumentsList";
 
@@ -45,10 +45,21 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo((props) => {
     testID = "legal-screen",
   } = props;
 
+  const navigation = useAppNavigation();
+
   return (
-    <ScreenLayout testID={testID} hideScrollIndicator>
+    <ScreenLayout
+      testID={testID}
+      hideScrollIndicator
+      header={
+        <NavigationHeader
+          title={title || ""}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
+    >
       <LegalScreenHeader title={title} description={description} />
-      
+
       <LegalDocumentsList
         documentsHeader={documentsHeader}
         privacyTitle={privacyTitle}

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/domains/notifications/index.ts

@@ -110,7 +110,7 @@ export { ReminderItem } from './reminders/presentation/components/ReminderItem';
 export type { ReminderItemProps, ReminderItemTranslations } from './reminders/presentation/components/ReminderItem';
 
 export { ReminderForm } from './reminders/presentation/components/ReminderForm';
-export type { ReminderFormProps, ReminderFormTranslations } from './reminders/presentation/components/ReminderForm';
+export type { ReminderFormProps, ReminderFormTranslations } from './reminders/presentation/components/ReminderForm.constants';
 
 export { FormButton } from './reminders/presentation/components/FormButton';
 export type { FormButtonProps } from './reminders/presentation/components/FormButton';