@umituz/react-native-settings 4.23.71 → 4.23.73

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

@@ -4,9 +4,8 @@
  */
 
 import React from "react";
-import { View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
-import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal, ScreenLayout } from "@umituz/react-native-design-system";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 import type { FeedbackFormProps } from "./FeedbackForm";
@@ -37,43 +36,39 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
 
     return (
         <BaseModal visible={visible} onClose={onClose}>
-            <SafeAreaView style={styles.safeArea}>
-                <KeyboardAvoidingView
-                    behavior={Platform.OS === "ios" ? "padding" : "height"}
-                    style={styles.keyboardView}
-                >
-                    <View style={[styles.header, { borderBottomColor: tokens.colors.border }]}>
-                        <View style={styles.headerText}>
-                            <AtomicText type="headlineSmall" color="textPrimary">
-                                {title}
+            <ScreenLayout
+                scrollable={true}
+                edges={[]}
+                keyboardAvoiding={true}
+                contentContainerStyle={styles.content}
+                hideScrollIndicator={false}
+            >
+                <View style={[styles.header, { borderBottomColor: tokens.colors.border }]}>
+                    <View style={styles.headerText}>
+                        <AtomicText type="headlineSmall" color="textPrimary">
+                            {title}
+                        </AtomicText>
+                        {subtitle && (
+                            <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
+                                {subtitle}
                             </AtomicText>
-                            {subtitle && (
-                                <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
-                                    {subtitle}
-                                </AtomicText>
-                            )}
-                        </View>
-                        <TouchableOpacity
-                            onPress={onClose}
-                            style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
-                        >
-                            <AtomicIcon name="close" size="sm" color="onSurface" />
-                        </TouchableOpacity>
+                        )}
                     </View>
-
-                    <ScrollView
-                        contentContainerStyle={styles.content}
-                        keyboardShouldPersistTaps="handled"
+                    <TouchableOpacity
+                        onPress={onClose}
+                        style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
                     >
-                        <FeedbackForm
-                            onSubmit={onSubmit}
-                            initialType={initialType}
-                            isSubmitting={isSubmitting}
-                            texts={texts}
-                        />
-                    </ScrollView>
-                </KeyboardAvoidingView>
-            </SafeAreaView>
+                        <AtomicIcon name="close" size="sm" color="onSurface" />
+                    </TouchableOpacity>
+                </View>
+
+                <FeedbackForm
+                    onSubmit={onSubmit}
+                    initialType={initialType}
+                    isSubmitting={isSubmitting}
+                    texts={texts}
+                />
+            </ScreenLayout>
         </BaseModal>
     );
 };
@@ -81,12 +76,6 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
 
 const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
-    safeArea: {
-        flex: 1,
-    },
-    keyboardView: {
-        flex: 1,
-    },
     header: {
         flexDirection: "row",
         justifyContent: "space-between",

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

@@ -0,0 +1,122 @@
+/**
+ * GamificationScreen - Pure Presentational Component
+ * Renders the gamification dashboard with all data provided as props
+ * Under 200 lines - only presentation logic
+ */
+
+import React from "react";
+import { View, ScrollView } from "react-native";
+import { useAppDesignTokens, AtomicText } 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";
+import type { GamificationScreenProps } from "./types";
+
+/**
+ * Internal component that renders the screen with all props
+ */
+export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
+  title,
+  statsTitle,
+  achievementsTitle,
+  streakTitle,
+  levelProps,
+  stats,
+  achievements,
+  streakProps,
+  emptyAchievementsText,
+  containerStyle,
+  headerStyle,
+  titleStyle,
+  sectionTitleStyle,
+  accentColor,
+  backgroundColor,
+  cardBackgroundColor,
+  textColor,
+  subtextColor,
+  headerComponent,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Use tokens for fallbacks
+  const finalAccentColor = accentColor || tokens.colors.primary;
+  const finalBackgroundColor = backgroundColor || tokens.colors.backgroundPrimary;
+  const finalCardBackgroundColor = cardBackgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+
+  return (
+    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
+      {headerComponent}
+
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <Header
+          title={title}
+          headerStyle={headerStyle}
+          titleStyle={titleStyle}
+          textColor={finalTextColor}
+        />
+
+        {/* Level Progress */}
+        <View style={styles.section}>
+          <LevelProgress
+            {...levelProps}
+            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}
+        />
+
+        {/* Achievements */}
+        <AchievementsList
+          achievementsTitle={achievementsTitle}
+          achievements={achievements}
+          emptyAchievementsText={emptyAchievementsText}
+          accentColor={finalAccentColor}
+          cardBackgroundColor={finalCardBackgroundColor}
+          textColor={finalTextColor}
+          subtextColor={finalSubtextColor}
+          sectionTitleStyle={sectionTitleStyle}
+        />
+      </ScrollView>
+    </View>
+  );
+};

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

@@ -0,0 +1,72 @@
+/**
+ * GamificationScreen With Config
+ * Component that uses the hook to fetch data and render the screen
+ * Separated to satisfy React Hooks rules
+ */
+
+import React from "react";
+import { GamificationScreenInner } from "./GamificationScreen";
+import type { GamificationConfigProps } from "./types";
+import type { GamificationScreenProps } from "./types";
+import type { Achievement } from "../../types";
+
+/**
+ * Component that uses the hook - separated to satisfy React Hooks rules
+ */
+export const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = ({ config }) => {
+  // Import hook here to avoid conditional hook usage
+  const { useGamification } = require("../../hooks/useGamification");
+
+  const {
+    points,
+    level,
+    streak,
+    achievements,
+  } = useGamification(config);
+
+  // Transform store achievements to UI props
+  const achievementItems = achievements.map((a: Achievement) => ({
+    ...a,
+    title: a.title,
+    description: a.description,
+    icon: a.icon,
+    isUnlocked: a.isUnlocked,
+    progress: a.progress,
+    threshold: a.threshold,
+    id: a.id,
+    type: a.type
+  }));
+
+  const screenProps: GamificationScreenProps = {
+    title: config.translations.title,
+    statsTitle: config.translations.statsTitle,
+    achievementsTitle: config.translations.achievementsTitle,
+    streakTitle: config.translations.streakTitle,
+    levelProps: {
+      level: level.currentLevel,
+      points: level.currentPoints,
+      pointsToNext: level.pointsToNext,
+      progress: level.progress,
+      levelTitle: config.translations.levelTitle,
+      showPoints: true,
+    },
+    streakProps: {
+      current: streak.current,
+      longest: streak.longest,
+      currentLabel: config.translations.currentStreak,
+      bestLabel: config.translations.bestStreak,
+      daysLabel: config.translations.days,
+    },
+    stats: [
+      {
+        label: config.translations.statsTitle,
+        value: points,
+        icon: "star",
+      },
+    ],
+    achievements: achievementItems,
+    emptyAchievementsText: config.translations.emptyAchievements,
+  };
+
+  return <GamificationScreenInner {...screenProps} />;
+};

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

@@ -1,22 +1,18 @@
-import React from "react";
 /**
  * GamificationScreen Component
  * Full gamification screen with integrated hook
  * Generic for 100+ apps - NO hardcoded strings
+ *
+ * Split into multiple files to keep each under 200 lines:
+ * - GamificationScreen.tsx: Pure presentational component
+ * - GamificationScreenWithConfig.tsx: Config-based version with hook
+ * - index.tsx: Main entry point that routes to appropriate component
  */
 
-import { View, ScrollView } from "react-native";
-import { useAppDesignTokens, AtomicText } 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";
+import React from "react";
+import { GamificationScreenInner } from "./GamificationScreen";
+import { GamificationScreenWithConfig } from "./GamificationScreenWithConfig";
 import type { GamificationScreenProps, GamificationConfigProps } from "./types";
-import type { Achievement } from "../../types";
-
-export type { GamificationScreenProps };
 
 /**
  * GamificationScreen that accepts either detailed props OR a config object
@@ -32,169 +28,3 @@ export const GamificationScreen: React.FC<GamificationScreenProps | Gamification
   return <GamificationScreenInner {...(props as GamificationScreenProps)} />;
 };
 
-/**
- * Component that uses the hook - separated to satisfy React Hooks rules
- */
-const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = ({ config }) => {
-  // Import hook here to avoid conditional hook usage
-  const { useGamification } = require("../../hooks/useGamification");
-
-  const {
-    points,
-    level,
-    streak,
-    achievements,
-  } = useGamification(config);
-
-  // Transform store achievements to UI props
-  const achievementItems = achievements.map((a: Achievement) => ({
-    ...a,
-    title: a.title,
-    description: a.description,
-    icon: a.icon,
-    isUnlocked: a.isUnlocked,
-    progress: a.progress,
-    threshold: a.threshold,
-    id: a.id,
-    type: a.type
-  }));
-
-  const screenProps: GamificationScreenProps = {
-    title: config.translations.title,
-    statsTitle: config.translations.statsTitle,
-    achievementsTitle: config.translations.achievementsTitle,
-    streakTitle: config.translations.streakTitle,
-    levelProps: {
-      level: level.currentLevel,
-      points: level.currentPoints,
-      pointsToNext: level.pointsToNext,
-      progress: level.progress,
-      levelTitle: config.translations.levelTitle,
-      showPoints: true,
-    },
-    streakProps: {
-      current: streak.current,
-      longest: streak.longest,
-      currentLabel: config.translations.currentStreak,
-      bestLabel: config.translations.bestStreak,
-      daysLabel: config.translations.days,
-    },
-    stats: [
-      {
-        label: config.translations.statsTitle,
-        value: points,
-        icon: "star",
-      },
-    ],
-    achievements: achievementItems,
-    emptyAchievementsText: config.translations.emptyAchievements,
-  };
-
-  return <GamificationScreenInner {...screenProps} />;
-};
-
-/**
- * Internal component that renders the screen with all props
- */
-const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
-  title,
-  statsTitle,
-  achievementsTitle,
-  streakTitle,
-  levelProps,
-  stats,
-  achievements,
-  streakProps,
-  emptyAchievementsText,
-  containerStyle,
-  headerStyle,
-  titleStyle,
-  sectionTitleStyle,
-  accentColor,
-  backgroundColor,
-  cardBackgroundColor,
-  textColor,
-  subtextColor,
-  headerComponent,
-}) => {
-  const tokens = useAppDesignTokens();
-  
-  // Use tokens for fallbacks
-  const finalAccentColor = accentColor || tokens.colors.primary;
-  const finalBackgroundColor = backgroundColor || tokens.colors.backgroundPrimary;
-  const finalCardBackgroundColor = cardBackgroundColor || tokens.colors.surface;
-  const finalTextColor = textColor || tokens.colors.textPrimary;
-  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
-
-  return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
-      {headerComponent}
-
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Header */}
-        <Header
-          title={title}
-          headerStyle={headerStyle}
-          titleStyle={titleStyle}
-          textColor={finalTextColor}
-        />
-
-        {/* Level Progress */}
-        <View style={styles.section}>
-          <LevelProgress
-            {...levelProps}
-            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}
-        />
-
-        {/* Achievements */}
-        <AchievementsList
-          achievementsTitle={achievementsTitle}
-          achievements={achievements}
-          emptyAchievementsText={emptyAchievementsText}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
-      </ScrollView>
-    </View>
-  );
-};

package/src/domains/gamification/components/index.ts

@@ -10,4 +10,5 @@ export { AchievementToast, type AchievementToastProps } from "./AchievementToast
 export { StreakDisplay, type StreakDisplayProps } from "./StreakDisplay";
 export { StatsCard, type StatsCardProps } from "./StatsCard";
 export { AchievementItem, type AchievementItemProps } from "./AchievementItem";
-export { GamificationScreen, type GamificationScreenProps } from "./GamificationScreen/index";
+export { GamificationScreen } from "./GamificationScreen/index";
+export type { GamificationScreenProps, GamificationConfigProps } from "./GamificationScreen/types";

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

@@ -3,9 +3,8 @@
  * Shared logic for legal document screens
  */
 import React from "react";
-import { View, ScrollView, StyleSheet } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens, type DesignTokens, ScreenLayout } from "@umituz/react-native-design-system";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
@@ -35,7 +34,6 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
   createStyles,
 }) => {
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
 
   const styles = React.useMemo(() => {
     const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
@@ -58,14 +56,6 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
     }
   }, [onUrlPress, url]);
 
-  const containerStyle = React.useMemo(() => [
-    styles.container,
-    {
-      backgroundColor: tokens.colors.backgroundPrimary,
-      paddingTop: insets.top,
-    },
-  ], [styles.container, tokens.colors.backgroundPrimary, insets.top]);
-
   const showContent = React.useMemo(() => !!(content), [content]);
   const showUrlSection = React.useMemo(() =>
     ContentValidationService.shouldShowUrlSection(url, onUrlPress),
@@ -107,23 +97,23 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
   }, [showContent, showUrlSection, styles, content, viewOnlineText, openText, handleUrlPress]);
 
   return (
-    <View style={containerStyle} testID={testID}>
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        <View style={styles.content}>
-          <AtomicText
-            type="headlineLarge"
-            color="primary"
-            style={styles.title}
-          >
-            {title}
-          </AtomicText>
+    <ScreenLayout
+      testID={testID}
+      scrollable={true}
+      hideScrollIndicator={false}
+      contentContainerStyle={styles.scrollContent}
+    >
+      <View style={styles.content}>
+        <AtomicText
+          type="headlineLarge"
+          color="primary"
+          style={styles.title}
+        >
+          {title}
+        </AtomicText>
 
-          {contentSection}
-        </View>
-      </ScrollView>
-    </View>
+        {contentSection}
+      </View>
+    </ScreenLayout>
   );
 });

package/src/domains/notifications/infrastructure/services/NotificationManager.ts

@@ -29,8 +29,6 @@ export class NotificationManager {
         shouldShowAlert: true,
         shouldPlaySound: true,
         shouldSetBadge: true,
-        shouldShowBanner: true,
-        shouldShowList: true,
       }),
     });
 

package/src/domains/notifications/infrastructure/services/NotificationService.ts

@@ -22,7 +22,11 @@ export class NotificationService {
 
   private constructor() {
     // Configure notification handler on initialization
-    NotificationManager.configure();
+    try {
+      NotificationManager.configure();
+    } catch (error) {
+      console.error('[NotificationService] Failed to configure notification handler:', error);
+    }
   }
 
   static getInstance(): NotificationService {

package/src/index.ts

@@ -91,7 +91,6 @@ export type { SettingsSectionProps } from './presentation/components/SettingsSec
 export { SettingsFooter } from './presentation/components/SettingsFooter';
 export type { SettingsFooterProps } from './presentation/components/SettingsFooter';
 
-export { SettingsErrorBoundary } from './presentation/components/SettingsErrorBoundary';
 
 
 // =============================================================================

package/src/infrastructure/utils/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Infrastructure Utilities
+ * Centralized utility functions for common operations
+ */
+
+export * from './styleUtils';
+export * from './memoUtils';