@umituz/react-native-ai-generation-content 1.17.256 → 1.17.258

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.256",
+  "version": "1.17.258",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -62,7 +62,7 @@
     "@types/react": "~19.1.10",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "@umituz/react-native-design-system": "^2.6.126",
+    "@umituz/react-native-design-system": "^2.8.5",
     "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-firebase": "latest",
     "@umituz/react-native-haptics": "latest",

package/src/domains/creations/infrastructure/repositories/CreationsWriter.ts

@@ -84,14 +84,14 @@ export class CreationsWriter {
             if (updates.output !== undefined) {
                 updateData.output = updates.output;
             }
-            if ((updates as any).rating !== undefined) {
-                updateData.rating = (updates as any).rating;
+            if (updates.rating !== undefined) {
+                updateData.rating = updates.rating;
             }
-            if ((updates as any).ratedAt !== undefined) {
-                updateData.ratedAt = (updates as any).ratedAt;
+            if (updates.ratedAt !== undefined) {
+                updateData.ratedAt = updates.ratedAt;
             }
-            if ((updates as any).isFavorite !== undefined) {
-                updateData.isFavorite = (updates as any).isFavorite;
+            if (updates.isFavorite !== undefined) {
+                updateData.isFavorite = updates.isFavorite;
             }
 
             await updateDoc(docRef, updateData);

package/src/domains/creations/presentation/components/CreationCard.types.ts

@@ -20,6 +20,8 @@ export interface CreationCardData {
   uri?: string;
   provider?: string;
   createdAt: Date | number;
+  /** Whether this creation is marked as favorite */
+  isFavorite?: boolean;
 }
 
 /**

package/src/domains/creations/presentation/components/index.ts

@@ -30,7 +30,6 @@ export { GalleryHeader } from "./GalleryHeader";
 export { EmptyState } from "./EmptyState";
 export { GalleryEmptyStates } from "./GalleryEmptyStates";
 export { CreationsHomeCard } from "./CreationsHomeCard";
-export { CreationImageViewer } from "./CreationImageViewer";
 export { CreationsGrid } from "./CreationsGrid";
 
 // Detail Components

package/src/domains/creations/presentation/components/useCreationCardActions.ts

@@ -45,7 +45,8 @@ export function useCreationCardActions({
     if (callbacks.onFavorite) {
       result.push({
         id: "favorite",
-        icon: "heart-outline",
+        icon: creation.isFavorite ? "heart" : "heart-outline",
+        color: creation.isFavorite ? "error" : undefined,
         onPress: () => callbacks.onFavorite?.(creation),
       });
     }

package/src/domains/creations/presentation/screens/CreationDetailScreen.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useAppDesignTokens, ImageGallery } from "@umituz/react-native-design-system";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { Creation } from '../../domain/entities/Creation';
 import type { CreationsConfig } from '../../domain/value-objects/CreationsConfig';
 import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
@@ -44,15 +44,6 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
 }) => {
     const tokens = useAppDesignTokens();
     const insets = useSafeAreaInsets();
-    const [showFullScreen, setShowFullScreen] = useState(false);
-
-    const handleImagePress = useCallback(() => {
-        setShowFullScreen(true);
-    }, []);
-
-    const handleDismissFullScreen = useCallback(() => {
-        setShowFullScreen(false);
-    }, []);
 
     // Extract data safely
     const metadata = (creation.metadata || {}) as CreationMetadata;
@@ -89,7 +80,7 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
                 {isVideo ? (
                     <DetailVideo videoUrl={videoUrl} _thumbnailUrl={thumbnailUrl} />
                 ) : (
-                    <DetailImage uri={creation.uri} onPress={handleImagePress} />
+                    <DetailImage uri={creation.uri} />
                 )}
 
                 <DetailInfo title={title} date={date} />
@@ -107,15 +98,6 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
                     viewResultLabel={onViewResult ? t("result.viewResult") : undefined}
                 />
             </ScrollView>
-
-            {!isVideo && (
-                <ImageGallery
-                    images={[{ uri: creation.uri }]}
-                    visible={showFullScreen}
-                    onDismiss={handleDismissFullScreen}
-                    index={0}
-                />
-            )}
         </View>
     );
 };

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
@@ -13,7 +13,7 @@ import { useFocusEffect } from "@react-navigation/native";
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
-import { GalleryHeader, CreationCard, CreationImageViewer, GalleryEmptyStates } from "../components";
+import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
@@ -26,8 +26,6 @@ interface CreationsGalleryScreenProps {
   readonly config: CreationsConfig;
   readonly t: (key: string) => string;
   readonly locale?: string;
-  readonly enableEditing?: boolean;
-  readonly onImageEdit?: (uri: string, creationId: string) => void | Promise<void>;
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
   readonly showFilter?: boolean;
@@ -39,8 +37,6 @@ export function CreationsGalleryScreen({
   repository,
   config,
   t,
-  enableEditing = false,
-  onImageEdit,
   onEmptyAction,
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
@@ -51,8 +47,6 @@ export function CreationsGalleryScreen({
   const { share } = useSharing();
   const alert = useAlert();
 
-  const [viewerVisible, setViewerVisible] = useState(false);
-  const [viewerIndex, setViewerIndex] = useState(0);
   const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
@@ -172,7 +166,6 @@ export function CreationsGalleryScreen({
         showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={isLoading} onRefresh={() => void refetch()} tintColor={tokens.colors.primary} />}
       />
-      <CreationImageViewer creations={filters.filtered} visible={viewerVisible} index={viewerIndex} onDismiss={() => setViewerVisible(false)} onIndexChange={setViewerIndex} enableEditing={enableEditing} onImageEdit={onImageEdit} />
       <FilterSheet visible={filters.statusFilterVisible} onClose={filters.closeStatusFilter} options={filters.statusFilter.filterOptions} selectedIds={[filters.statusFilter.selectedId]} onFilterPress={filters.statusFilter.selectFilter} onClearFilters={filters.statusFilter.clearFilter} title={t(config.translations.statusFilterTitle ?? "creations.filter.status")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
       <FilterSheet visible={filters.mediaFilterVisible} onClose={filters.closeMediaFilter} options={filters.mediaFilter.filterOptions} selectedIds={[filters.mediaFilter.selectedId]} onFilterPress={filters.mediaFilter.selectFilter} onClearFilters={filters.mediaFilter.clearFilter} title={t(config.translations.mediaFilterTitle ?? "creations.filter.media")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
     </View>

package/src/domains/result-preview/presentation/hooks/useResultActions.ts

@@ -13,12 +13,28 @@ import type {
 } from "../types/result-preview.types";
 
 /**
- * Check if a string is a base64 data URL
+ * Check if a string is a base64 data URL or raw base64
  */
 const isBase64DataUrl = (str: string): boolean => {
   return str.startsWith("data:image/");
 };
 
+/**
+ * Check if a string is raw base64 (not a URL and not a data URL)
+ */
+const isRawBase64 = (str: string): boolean => {
+  return !str.startsWith("http") && !str.startsWith("data:image/") && !str.startsWith("file://");
+};
+
+/**
+ * Convert raw base64 to data URL format
+ */
+const toDataUrl = (str: string): string => {
+  if (isBase64DataUrl(str)) return str;
+  if (isRawBase64(str)) return `data:image/jpeg;base64,${str}`;
+  return str;
+};
+
 /**
  * Save base64 image to file system
  */
@@ -80,11 +96,13 @@ export const useResultActions = (
         throw new Error("Media library permission not granted");
       }
 
-      let fileUri = imageUrl;
+      // Convert to data URL if raw base64
+      const normalizedUrl = toDataUrl(imageUrl);
+      let fileUri = normalizedUrl;
 
       // If it's a base64 string, save to file first
-      if (isBase64DataUrl(fileUri)) {
-        fileUri = await saveBase64ToFile(fileUri);
+      if (isBase64DataUrl(normalizedUrl)) {
+        fileUri = await saveBase64ToFile(normalizedUrl);
       }
 
       // Save to media library
@@ -112,11 +130,13 @@ export const useResultActions = (
       setIsSharing(true);
       onShareStart?.();
 
-      let shareUrl = imageUrl;
+      // Convert to data URL if raw base64
+      const normalizedUrl = toDataUrl(imageUrl);
+      let shareUrl = normalizedUrl;
 
       // If it's a base64 string, save to file first for sharing
-      if (isBase64DataUrl(shareUrl)) {
-        shareUrl = await saveBase64ToFile(shareUrl);
+      if (isBase64DataUrl(normalizedUrl)) {
+        shareUrl = await saveBase64ToFile(normalizedUrl);
       }
 
       // Use expo-sharing for cross-platform file sharing

package/src/features/love-message/presentation/components/CategoryGrid.tsx

@@ -8,6 +8,7 @@ import {
   AtomicText,
   AtomicIcon,
   useAppDesignTokens,
+  type IconName,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { MESSAGE_TYPES } from "../../domain/constants";
@@ -41,7 +42,7 @@ export const CategoryGrid: React.FC<CategoryGridProps> = ({ onCategoryPress }) =
             }]}
           >
             <View style={[styles.categoryIconContainer, { backgroundColor: `${tokens.colors.primary}15` }]}>
-              <AtomicIcon name={cat.icon as any} color="primary" size="md" />
+              <AtomicIcon name={cat.icon as IconName} color="primary" size="md" />
             </View>
             <AtomicText type="labelLarge" color="textPrimary">
               {t(cat.labelKey)}

package/src/features/love-message/presentation/components/GeneratorHeader.tsx

@@ -7,7 +7,6 @@ import { View, Pressable, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicIcon,
-  useAppDesignTokens,
   useSafeAreaInsets,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
@@ -29,7 +28,6 @@ export const GeneratorHeader: React.FC<GeneratorHeaderProps> = ({
   onGenerate,
   isGenerating,
 }) => {
-  const tokens = useAppDesignTokens();
   const { top } = useSafeAreaInsets();
   const { t } = useLocalization();
 

package/src/features/love-message/presentation/components/MessageListItem.tsx

@@ -11,9 +11,10 @@ import {
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
+import type { TemplateMessage } from "../../domain/constants";
 
 interface MessageListItemProps {
-  item: any;
+  item: TemplateMessage;
   onShare: (text: string) => void;
 }
 

package/src/features/love-message/presentation/components/ToneSelector.tsx

@@ -9,6 +9,7 @@ import {
   AtomicText,
   AtomicIcon,
   useAppDesignTokens,
+  type IconName,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { MESSAGE_TONES } from "../../domain/constants";
@@ -55,7 +56,7 @@ export const ToneSelector: FC<ToneSelectorProps> = ({
               ]}
             >
               <AtomicIcon
-                name={config.icon as any}
+                name={config.icon as IconName}
                 color={isSelected ? "onPrimary" : "secondary"}
                 size="sm"
                 style={styles.icon}

package/src/features/love-message/presentation/components/TypeSelector.tsx

@@ -9,6 +9,7 @@ import {
   AtomicText,
   AtomicIcon,
   useAppDesignTokens,
+  type IconName,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { MESSAGE_TYPES } from "../../domain/constants";
@@ -51,7 +52,7 @@ export const TypeSelector: FC<TypeSelectorProps> = ({
               ]}
             >
               <AtomicIcon
-                name={config.icon as any}
+                name={config.icon as IconName}
                 color={isSelected ? "onPrimary" : "secondary"}
                 size="md"
                 style={styles.icon}

package/src/features/love-message/presentation/hooks/useLoveMessageGenerator.ts

@@ -4,7 +4,7 @@
  */
 
 import { useState, useCallback, useEffect } from "react";
-import { useNavigation, useIsFocused, useRoute } from "@react-navigation/native";
+import { useIsFocused } from "@react-navigation/native";
 import { MessageType, MessageTone } from "../../domain/types";
 import { generateLoveMessage } from "../../infrastructure/services/LoveMessageService";
 import { PartnerProfileRepository } from "../../infrastructure/persistence/PartnerProfileRepository";
@@ -76,7 +76,7 @@ export const useLoveMessageGenerator = (config: {
 
       setGeneratedMessage(message);
       setCurrentStep(GeneratorStep.RESULT);
-    } catch (error) {
+    } catch {
       // Error handled in usecase
     } finally {
       setIsGenerating(false);

package/src/features/love-message/presentation/hooks/usePartnerProfile.ts

@@ -3,7 +3,6 @@
  */
 
 import { useState, useEffect, useCallback } from "react";
-import { useNavigation } from "@react-navigation/native";
 import { PartnerProfile } from "../../domain/types";
 import { PartnerProfileRepository } from "../../infrastructure/persistence/PartnerProfileRepository";
 

package/src/features/love-message/presentation/navigation/LoveMessageStack.tsx

@@ -5,15 +5,16 @@
 
 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { LoveMessageExploreScreen } from "@domains/love-message/presentation/screens/LoveMessageExploreScreen";
-import { MessageListScreen } from "@domains/love-message/presentation/screens/MessageListScreen";
-import { LoveMessageGeneratorScreen } from "@domains/love-message/presentation/screens/LoveMessageGeneratorScreen";
-import { PartnerProfileScreen } from "@domains/love-message/presentation/screens/PartnerProfileScreen";
+import { LoveMessageExploreScreen } from "../screens/LoveMessageExploreScreen";
+import { MessageListScreen } from "../screens/MessageListScreen";
+import { LoveMessageGeneratorScreen } from "../screens/LoveMessageGeneratorScreen";
+import { PartnerProfileScreen } from "../screens/PartnerProfileScreen";
+import type { MessageType } from "../../domain/types";
 
 export type LoveMessageStackParamList = {
   LoveMessageExplore: undefined;
-  MessageList: { categoryId: string } | undefined;
-  MessageGenerator: { initialType?: any } | undefined;
+  MessageList: { categoryId: string };
+  MessageGenerator: { initialType?: MessageType };
   PartnerProfile: undefined;
 };
 
@@ -21,19 +22,10 @@ const Stack = createStackNavigator<LoveMessageStackParamList>();
 
 export const LoveMessageStack: React.FC = () => {
   return (
-    <Stack.Navigator
-      screenOptions={{ headerShown: false }}
-      initialRouteName="LoveMessageExplore"
-    >
-      <Stack.Screen
-        name="LoveMessageExplore"
-        component={LoveMessageExploreScreen}
-      />
+    <Stack.Navigator screenOptions={{ headerShown: false }} initialRouteName="LoveMessageExplore">
+      <Stack.Screen name="LoveMessageExplore" component={LoveMessageExploreScreen} />
       <Stack.Screen name="MessageList" component={MessageListScreen} />
-      <Stack.Screen
-        name="MessageGenerator"
-        component={LoveMessageGeneratorScreen}
-      />
+      <Stack.Screen name="MessageGenerator" component={LoveMessageGeneratorScreen} />
       <Stack.Screen name="PartnerProfile" component={PartnerProfileScreen} />
     </Stack.Navigator>
   );

package/src/features/love-message/presentation/screens/LoveMessageExploreScreen.tsx

@@ -3,53 +3,45 @@
  * Premium entry point for Love Message domain
  */
 
-import { FC, useCallback } from "react";
-import { View, ScrollView, StyleSheet, Pressable } from "react-native";
+import { FC } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
 import {
-  AtomicText,
-  AtomicIcon,
   useAppDesignTokens,
   useSafeAreaInsets,
+  AppNavigation,
 } from "@umituz/react-native-design-system";
-import { useLocalization } from "@umituz/react-native-localization";
-import { useNavigation } from "@react-navigation/native";
 import { ExploreHeader } from "../components/ExploreHeader";
 import { LoveMessageHeroSection } from "../components/LoveMessageHeroSection";
 import { CategoryGrid } from "../components/CategoryGrid";
 import { TrendingSection } from "../components/TrendingSection";
 
-interface LoveMessageExploreScreenProps {
-  onNavigateToGenerator: () => void;
-  onNavigateToCategory: (categoryId: string) => void;
-  onNavigateToTrending: () => void;
-}
-
-export const LoveMessageExploreScreen: FC<LoveMessageExploreScreenProps> = ({
-  onNavigateToGenerator,
-  onNavigateToCategory,
-  onNavigateToTrending,
-}) => {
+export const LoveMessageExploreScreen: FC = () => {
   const tokens = useAppDesignTokens();
   const { bottom } = useSafeAreaInsets();
-  const { t } = useLocalization();
+
+  const handleNavigateToGenerator = () => {
+    AppNavigation.navigate("MessageGenerator", {});
+  };
+
+  const handleNavigateToCategory = (categoryId: string) => {
+    AppNavigation.navigate("MessageList", { categoryId });
+  };
+
+  const handleNavigateToTrending = () => {
+    AppNavigation.navigate("MessageList", { categoryId: "trending" });
+  };
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <ExploreHeader onMagicPress={onNavigateToGenerator} />
+      <ExploreHeader onMagicPress={handleNavigateToGenerator} />
 
-      <ScrollView 
+      <ScrollView
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: bottom + 120 }}
       >
         <LoveMessageHeroSection />
-        
-        <CategoryGrid 
-          onCategoryPress={onNavigateToCategory} 
-        />
-
-        <TrendingSection 
-          onViewAll={onNavigateToTrending} 
-        />
+        <CategoryGrid onCategoryPress={handleNavigateToCategory} />
+        <TrendingSection onViewAll={handleNavigateToTrending} />
       </ScrollView>
     </View>
   );
@@ -57,19 +49,4 @@ export const LoveMessageExploreScreen: FC<LoveMessageExploreScreenProps> = ({
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  fabContainer: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    alignItems: 'center',
-    zIndex: 10,
-  },
-  fab: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    alignItems: 'center',
-    justifyContent: 'center',
-    elevation: 8,
-  },
 });

package/src/features/love-message/presentation/screens/LoveMessageGeneratorScreen.tsx

@@ -1,6 +1,6 @@
 /**
  * Love Message Generator Screen
- * Optimized multi-step wizard flow
+ * Multi-step wizard flow
  */
 
 import { FC, useMemo } from "react";
@@ -10,8 +10,10 @@ import {
   AtomicButton,
   useAppDesignTokens,
   useSafeAreaInsets,
+  AppNavigation,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
+import { useRoute, RouteProp } from "@react-navigation/native";
 import { ProgressDots } from "../components/ProgressDots";
 import { MessageResult } from "../components/MessageResult";
 import { GeneratorHeader } from "../components/GeneratorHeader";
@@ -21,35 +23,37 @@ import { StepDetails } from "../components/StepDetails";
 import { MessageType } from "../../domain/types";
 import { useLoveMessageGenerator, GeneratorStep } from "../hooks/useLoveMessageGenerator";
 
-interface LoveMessageGeneratorScreenProps {
-  onBack: () => void;
-  onNavigateToProfile: () => void;
-  initialType?: MessageType;
-}
+type RouteParams = { initialType?: MessageType };
 
-export const LoveMessageGeneratorScreen: FC<LoveMessageGeneratorScreenProps> = ({
-  onBack,
-  onNavigateToProfile,
-  initialType,
-}) => {
+export const LoveMessageGeneratorScreen: FC = () => {
   const tokens = useAppDesignTokens();
   const { bottom } = useSafeAreaInsets();
   const { t } = useLocalization();
-  const gen = useLoveMessageGenerator({ onBack, initialType });
+  const route = useRoute<RouteProp<{ params: RouteParams }, "params">>();
+
+  const initialType = route.params?.initialType;
+  const gen = useLoveMessageGenerator({ onBack: () => AppNavigation.goBack(), initialType });
+
+  const handleNavigateToProfile = () => AppNavigation.navigate("PartnerProfile");
 
   const stepTitle = useMemo(() => {
     switch (gen.currentStep) {
-      case GeneratorStep.PARTNER: return t("loveMessage.generator.stepPartner");
-      case GeneratorStep.VIBE: return t("loveMessage.generator.stepVibe");
-      case GeneratorStep.DETAILS: return t("loveMessage.generator.stepDetails");
-      case GeneratorStep.RESULT: return t("loveMessage.generator.stepResult");
-      default: return "";
+      case GeneratorStep.PARTNER:
+        return t("loveMessage.generator.stepPartner");
+      case GeneratorStep.VIBE:
+        return t("loveMessage.generator.stepVibe");
+      case GeneratorStep.DETAILS:
+        return t("loveMessage.generator.stepDetails");
+      case GeneratorStep.RESULT:
+        return t("loveMessage.generator.stepResult");
+      default:
+        return "";
     }
   }, [gen.currentStep, t]);
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <GeneratorHeader 
+      <GeneratorHeader
         currentStep={gen.currentStep}
         partnerName={gen.partnerName}
         onBack={gen.handleBack}
@@ -58,7 +62,10 @@ export const LoveMessageGeneratorScreen: FC<LoveMessageGeneratorScreenProps> = (
         isGenerating={gen.isGenerating}
       />
 
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: bottom + 120 }}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: bottom + 120 }}
+      >
         <View style={styles.heroSection}>
           <ProgressDots currentStep={gen.currentStep} totalSteps={4} />
           <AtomicText type="headlineLarge" color="textPrimary" style={styles.heroTitle}>
@@ -69,20 +76,20 @@ export const LoveMessageGeneratorScreen: FC<LoveMessageGeneratorScreenProps> = (
         <View style={styles.formContent}>
           {gen.currentStep === GeneratorStep.PARTNER && (
             <Animated.View>
-              <StepPartner 
+              <StepPartner
                 partnerName={gen.partnerName}
                 setPartnerName={gen.setPartnerName}
                 useProfile={gen.useProfile}
                 setUseProfile={gen.setUseProfile}
                 hasProfile={gen.hasProfile}
-                onEditProfile={onNavigateToProfile}
+                onEditProfile={handleNavigateToProfile}
               />
             </Animated.View>
           )}
 
           {gen.currentStep === GeneratorStep.VIBE && (
             <Animated.View>
-              <StepVibe 
+              <StepVibe
                 selectedType={gen.selectedType}
                 setSelectedType={gen.setSelectedType}
                 selectedTone={gen.selectedTone}
@@ -120,9 +127,20 @@ export const LoveMessageGeneratorScreen: FC<LoveMessageGeneratorScreenProps> = (
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  heroSection: { paddingVertical: 32, alignItems: 'center' },
-  heroTitle: { fontWeight: 'bold', textAlign: 'center', marginBottom: 8, paddingHorizontal: 20 },
+  heroSection: { paddingVertical: 32, alignItems: "center" },
+  heroTitle: {
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 8,
+    paddingHorizontal: 20,
+  },
   formContent: { paddingHorizontal: 20 },
-  footer: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 24, backgroundColor: 'transparent' },
+  footer: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 24,
+  },
   actionBtn: { height: 60, borderRadius: 30 },
 });

package/src/features/love-message/presentation/screens/MessageListScreen.tsx

@@ -9,60 +9,67 @@ import {
   AtomicIcon,
   useAppDesignTokens,
   useSafeAreaInsets,
+  AppNavigation,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useNavigation, useRoute } from "@react-navigation/native";
+import { useRoute, RouteProp } from "@react-navigation/native";
 import { CATEGORY_TEMPLATES, MESSAGE_TYPES } from "../../domain/constants";
 import { MessageListItem } from "../components/MessageListItem";
+import type { MessageType } from "../../domain/types";
 
-interface MessageListScreenProps {
-  categoryId: string;
-  onBack: () => void;
-  onNavigateToGenerator: (initialType?: string) => void;
-}
+type RouteParams = { categoryId?: string };
 
-export const MessageListScreen: FC<MessageListScreenProps> = ({
-  categoryId,
-  onBack,
-  onNavigateToGenerator,
-}) => {
+export const MessageListScreen: FC = () => {
   const tokens = useAppDesignTokens();
   const { top, bottom } = useSafeAreaInsets();
   const { t } = useLocalization();
+  const route = useRoute<RouteProp<{ params: RouteParams }, "params">>();
 
+  const categoryId = route.params?.categoryId ?? "romantic";
   const messages = useMemo(() => CATEGORY_TEMPLATES[categoryId] || [], [categoryId]);
 
   const categoryTitle = useMemo(() => {
     if (categoryId === "trending") return t("loveMessage.explore.trending");
-    const config = MESSAGE_TYPES.find(c => c.type === categoryId);
+    const config = MESSAGE_TYPES.find((c) => c.type === categoryId);
     return config ? t(config.labelKey) : categoryId;
   }, [categoryId, t]);
 
+  const handleBack = () => AppNavigation.goBack();
+
+  const handleNavigateToGenerator = (type?: string) => {
+    AppNavigation.navigate("MessageGenerator", { initialType: type as MessageType });
+  };
+
   const handleShare = useCallback(async (text: string) => {
     try {
       await Share.share({ message: text });
-    } catch { /* Ignore */ }
+    } catch {
+      /* Ignore */
+    }
   }, []);
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <View style={[styles.header, { paddingTop: top + tokens.spacing.md }]}>
-        <Pressable onPress={onBack} style={styles.backBtn}>
+        <Pressable onPress={handleBack} style={styles.backBtn}>
           <AtomicIcon name="arrow-back" color="textPrimary" size="sm" />
         </Pressable>
         <AtomicText type="headlineSmall" color="textPrimary" style={styles.headerTitle}>
           {categoryTitle}
         </AtomicText>
-        <View style={{ width: 44 }} />
+        <View style={styles.spacer} />
       </View>
 
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: bottom + 100, paddingHorizontal: 16 }}>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: bottom + 100, paddingHorizontal: 16 }}
+      >
         <View style={styles.headlineContainer}>
           <AtomicText type="headlineMedium" color="textPrimary" style={styles.headline}>
-            {`${messages.length} messages`}
+            {`${messages.length} ${t("loveMessage.messages")}`}
           </AtomicText>
           <AtomicText type="bodySmall" color="textTertiary">
-            AI-crafted for your special moments
+            {t("loveMessage.aiCrafted")}
           </AtomicText>
         </View>
 
@@ -72,13 +79,13 @@ export const MessageListScreen: FC<MessageListScreenProps> = ({
       </ScrollView>
 
       <View style={[styles.fabContainer, { bottom: bottom + tokens.spacing.lg }]}>
-        <Pressable 
-          onPress={() => onNavigateToGenerator(categoryId !== "trending" ? categoryId : undefined)}
+        <Pressable
+          onPress={() => handleNavigateToGenerator(categoryId !== "trending" ? categoryId : undefined)}
           style={[styles.fab, { backgroundColor: tokens.colors.primary }]}
         >
           <AtomicIcon name="sparkles" color="onPrimary" size="sm" />
           <AtomicText type="labelLarge" color="onPrimary" style={styles.fabText}>
-            GENERATE MORE
+            {t("loveMessage.generateMore")}
           </AtomicText>
         </Pressable>
       </View>
@@ -88,12 +95,32 @@ export const MessageListScreen: FC<MessageListScreenProps> = ({
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 8, paddingBottom: 16 },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    paddingBottom: 16,
+  },
   backBtn: { padding: 12 },
-  headerTitle: { fontWeight: 'bold' },
+  headerTitle: { fontWeight: "bold" },
+  spacer: { width: 44 },
   headlineContainer: { paddingVertical: 24 },
-  headline: { fontWeight: 'bold', marginBottom: 4 },
-  fabContainer: { position: "absolute", left: 20, right: 20, alignItems: "center" },
-  fab: { flexDirection: "row", alignItems: "center", justifyContent: "center", paddingVertical: 16, paddingHorizontal: 24, borderRadius: 32, gap: 12 },
+  headline: { fontWeight: "bold", marginBottom: 4 },
+  fabContainer: {
+    position: "absolute",
+    left: 20,
+    right: 20,
+    alignItems: "center",
+  },
+  fab: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+    borderRadius: 32,
+    gap: 12,
+  },
   fabText: { fontWeight: "bold", letterSpacing: 1 },
 });

package/src/features/love-message/presentation/screens/PartnerProfileScreen.tsx

@@ -1,6 +1,5 @@
 /**
  * Partner Profile Screen
- * Optimized version with hooks and components
  */
 
 import { FC } from "react";
@@ -10,28 +9,25 @@ import {
   AtomicButton,
   useAppDesignTokens,
   useSafeAreaInsets,
+  AppNavigation,
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
 import { LOVE_LANGUAGES } from "../../domain/constants";
 import { usePartnerProfile } from "../hooks/usePartnerProfile";
 import { FieldInput } from "../components/FieldInput";
 
-interface PartnerProfileScreenProps {
-  onBack: () => void;
-}
-
-export const PartnerProfileScreen: FC<PartnerProfileScreenProps> = ({ onBack }) => {
+export const PartnerProfileScreen: FC = () => {
   const tokens = useAppDesignTokens();
   const { top, bottom } = useSafeAreaInsets();
   const { t } = useLocalization();
-  const p = usePartnerProfile(onBack);
+  const p = usePartnerProfile(() => AppNavigation.goBack());
 
   if (p.isLoading) return null;
 
   return (
     <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
       <View style={[styles.header, { paddingTop: top + tokens.spacing.md }]}>
-        <AtomicButton icon="arrow-back" onPress={onBack} variant="text" size="sm" />
+        <AtomicButton icon="arrow-back" onPress={() => AppNavigation.goBack()} variant="text" size="sm" />
         <View style={styles.headerTitle}>
           <AtomicText type="headlineSmall" color="textPrimary" style={styles.headerText}>
             {t("loveMessage.partnerProfile.title")}
@@ -39,17 +35,21 @@ export const PartnerProfileScreen: FC<PartnerProfileScreenProps> = ({ onBack })
         </View>
       </View>
 
-      <ScrollView 
-        contentContainerStyle={{ paddingBottom: bottom + tokens.spacing.xl, paddingHorizontal: tokens.spacing.lg }}
+      <ScrollView
+        contentContainerStyle={{
+          paddingBottom: bottom + tokens.spacing.xl,
+          paddingHorizontal: tokens.spacing.lg,
+        }}
         showsVerticalScrollIndicator={false}
       >
         <AtomicText type="bodyMedium" color="textSecondary" style={styles.subtitle}>
           {t("loveMessage.partnerProfile.subtitle")}
         </AtomicText>
 
-        <FieldInput 
-          label={t("loveMessage.partnerName")} value={p.profile.name} 
-          onChange={(text) => p.setProfile((prev) => ({ ...prev, name: text }))} 
+        <FieldInput
+          label={t("loveMessage.partnerName")}
+          value={p.profile.name}
+          onChange={(text) => p.setProfile((prev) => ({ ...prev, name: text }))}
           placeholder={t("loveMessage.partnerNamePlaceholder")}
         />
 
@@ -60,30 +60,39 @@ export const PartnerProfileScreen: FC<PartnerProfileScreenProps> = ({ onBack })
           <View style={styles.chipContainer}>
             {LOVE_LANGUAGES.map((lang) => (
               <AtomicButton
-                key={lang.language} title={t(lang.labelKey)}
+                key={lang.language}
+                title={t(lang.labelKey)}
                 onPress={() => p.setProfile((prev) => ({ ...prev, loveLanguage: lang.language }))}
                 variant={p.profile.loveLanguage === lang.language ? "primary" : "outline"}
-                size="sm" style={styles.chip}
+                size="sm"
+                style={styles.chip}
               />
             ))}
           </View>
         </View>
 
-        <FieldInput 
-          label={t("loveMessage.partnerProfile.traits")} value={p.profile.traits} 
-          onChange={(text) => p.setProfile((prev) => ({ ...prev, traits: text }))} 
+        <FieldInput
+          label={t("loveMessage.partnerProfile.traits")}
+          value={p.profile.traits}
+          onChange={(text) => p.setProfile((prev) => ({ ...prev, traits: text }))}
           placeholder={t("loveMessage.partnerProfile.traitsPlaceholder")}
         />
 
-        <FieldInput 
-          label={t("loveMessage.partnerProfile.quirks")} value={p.profile.quirks} 
-          onChange={(text) => p.setProfile((prev) => ({ ...prev, quirks: text }))} 
-          placeholder={t("loveMessage.partnerProfile.quirksPlaceholder")} multiline
+        <FieldInput
+          label={t("loveMessage.partnerProfile.quirks")}
+          value={p.profile.quirks}
+          onChange={(text) => p.setProfile((prev) => ({ ...prev, quirks: text }))}
+          placeholder={t("loveMessage.partnerProfile.quirksPlaceholder")}
+          multiline
         />
 
         <AtomicButton
-          title={t("loveMessage.partnerProfile.save")} onPress={p.handleSave}
-          disabled={!p.profile.name.trim()} variant="primary" fullWidth style={styles.saveBtn}
+          title={t("loveMessage.partnerProfile.save")}
+          onPress={p.handleSave}
+          disabled={!p.profile.name.trim()}
+          variant="primary"
+          fullWidth
+          style={styles.saveBtn}
         />
       </ScrollView>
     </View>
@@ -92,7 +101,12 @@ export const PartnerProfileScreen: FC<PartnerProfileScreenProps> = ({ onBack })
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
-  header: { flexDirection: "row", alignItems: "center", paddingHorizontal: 8, paddingBottom: 24 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 8,
+    paddingBottom: 24,
+  },
   headerTitle: { flex: 1, marginRight: 40, alignItems: "center" },
   headerText: { fontWeight: "bold" },
   subtitle: { marginBottom: 32 },