@umituz/react-native-ai-generation-content 1.17.274 → 1.17.276

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.17.274",
+  "version": "1.17.276",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/creations/domain/value-objects/CreationsConfig.ts

@@ -27,6 +27,8 @@ export interface CreationsTranslations {
   readonly statusFilterTitle?: string;
   readonly mediaFilterTitle?: string;
   readonly clearFilter?: string;
+  readonly resultTitle?: string;
+  readonly resultLabel?: string;
 }
 
 export interface CreationsFilterConfig {

package/src/domains/creations/presentation/components/CreationActions.tsx

@@ -97,10 +97,12 @@ export function CreationActions({
             action.filled && styles.actionButtonFilled,
             action.disabled && styles.actionButtonDisabled,
           ]}
-          onPress={action.onPress}
+          onPress={(e) => {
+            e.stopPropagation();
+            action.onPress();
+          }}
           disabled={action.disabled || action.loading}
           activeOpacity={0.7}
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         >
           {action.loading ? (
             <AtomicSpinner

package/src/domains/creations/presentation/components/CreationCard.tsx

@@ -33,6 +33,15 @@ export function CreationCard({
 }: CreationCardProps) {
   const tokens = useAppDesignTokens();
 
+  // Debug: Log at render time to verify callbacks
+  if (__DEV__) {
+    console.log("[CreationCard] RENDER", {
+      creationId: creation.id,
+      hasOnPress: !!callbacks.onPress,
+      callbacksKeys: Object.keys(callbacks),
+    });
+  }
+
   const previewUrl = getPreviewUrl(creation.output) || creation.uri;
   const title = getCreationTitle(creation.prompt, creation.type as CreationTypeId);
   const formattedDate = useCreationDateFormatter(creation.createdAt, formatDate);
@@ -46,9 +55,9 @@ export function CreationCard({
 
   const handlePress = useCallback(() => {
     if (__DEV__) {
-      console.log("[CreationCard] handlePress called", {
+      console.log("[CreationCard] handlePress TRIGGERED", {
         creationId: creation.id,
-        hasOnPress: !!callbacks.onPress
+        hasOnPress: !!callbacks.onPress,
       });
     }
     callbacks.onPress?.(creation);
@@ -86,14 +95,27 @@ export function CreationCard({
     [tokens]
   );
 
+  const handlePressIn = useCallback(() => {
+    if (__DEV__) {
+      console.log("[CreationCard] PRESS_IN detected", { creationId: creation.id });
+    }
+  }, [creation.id]);
+
+  const isDisabled = !callbacks.onPress;
+
+  if (__DEV__ && isDisabled) {
+    console.log("[CreationCard] WARNING: Card is DISABLED - onPress is falsy");
+  }
+
   return (
     <TouchableOpacity
       style={styles.card}
       onPress={handlePress}
+      onPressIn={handlePressIn}
       activeOpacity={callbacks.onPress ? 0.7 : 1}
-      disabled={!callbacks.onPress}
+      disabled={isDisabled}
     >
-      <View style={styles.previewContainer}>
+      <View style={styles.previewContainer} pointerEvents="box-none">
         <CreationPreview
           uri={previewUrl}
           status={creation.status || "completed"}
@@ -109,9 +131,9 @@ export function CreationCard({
         )}
       </View>
 
-      <View style={styles.content}>
-        <View style={styles.header}>
-          <View style={styles.titleContainer}>
+      <View style={styles.content} pointerEvents="box-none">
+        <View style={styles.header} pointerEvents="box-none">
+          <View style={styles.titleContainer} pointerEvents="box-none">
             <AtomicText type="bodyMedium" style={styles.title} numberOfLines={2}>
               {title}
             </AtomicText>

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import React, { useState, useMemo, useCallback } from "react";
 import { View, FlatList, RefreshControl, StyleSheet } from "react-native";
 import {
   useAppDesignTokens,
@@ -14,7 +14,10 @@ import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
 import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
+import { ResultPreviewScreen } from "../../../result-preview/presentation/components/ResultPreviewScreen";
+import { useResultActions } from "../../../result-preview/presentation/hooks/useResultActions";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
+import { getPreviewUrl } from "../../domain/utils";
 import type { Creation } from "../../domain/entities/Creation";
 import type { CreationsConfig } from "../../domain/value-objects/CreationsConfig";
 import type { ICreationsRepository } from "../../domain/repositories/ICreationsRepository";
@@ -24,11 +27,9 @@ interface CreationsGalleryScreenProps {
   readonly repository: ICreationsRepository;
   readonly config: CreationsConfig;
   readonly t: (key: string) => string;
-  readonly locale?: string;
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
   readonly showFilter?: boolean;
-  readonly onViewResult?: (creation: Creation) => void;
 }
 
 export function CreationsGalleryScreen({
@@ -39,15 +40,23 @@ export function CreationsGalleryScreen({
   onEmptyAction,
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
-  onViewResult,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
   const alert = useAlert();
+  const [selectedCreation, setSelectedCreation] = useState<Creation | null>(null);
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
   const deleteMutation = useDeleteCreation({ userId, repository });
 
+  const selectedImageUrl = selectedCreation ? (getPreviewUrl(selectedCreation.output) || selectedCreation.uri) : undefined;
+
+  const { isSharing, isSaving, handleDownload, handleShare } = useResultActions({
+    imageUrl: selectedImageUrl,
+    onSaveSuccess: () => alert.show(AlertType.SUCCESS, AlertMode.TOAST, t("common.success"), t("result.saved")),
+    onSaveError: () => alert.show(AlertType.ERROR, AlertMode.TOAST, t("common.error"), t("result.saveError")),
+  });
+
   const statusOptions = config.filterConfig?.statusOptions ?? STATUS_FILTER_OPTIONS;
   const mediaOptions = config.filterConfig?.mediaOptions ?? MEDIA_FILTER_OPTIONS;
   const showStatusFilter = config.filterConfig?.showStatusFilter ?? true;
@@ -57,7 +66,7 @@ export function CreationsGalleryScreen({
 
   useFocusEffect(useCallback(() => { void refetch(); }, [refetch]));
 
-  const handleShare = useCallback((c: Creation) => {
+  const handleShareCard = useCallback((c: Creation) => {
     void share(c.uri, { dialogTitle: t("common.share") });
   }, [share, t]);
 
@@ -80,6 +89,18 @@ export function CreationsGalleryScreen({
     })();
   }, [userId, repository, refetch]);
 
+  const handleCardPress = useCallback((item: Creation) => {
+    setSelectedCreation(item);
+  }, []);
+
+  const handleBack = useCallback(() => {
+    setSelectedCreation(null);
+  }, []);
+
+  const handleTryAgain = useCallback(() => {
+    setSelectedCreation(null);
+  }, []);
+
   const filterButtons = useMemo(() => {
     const buttons = [];
     if (showStatusFilter) {
@@ -103,27 +124,17 @@ export function CreationsGalleryScreen({
     return buttons;
   }, [showStatusFilter, showMediaFilter, filters, t, config.translations]);
 
-  const handleCardPress = useCallback((item: Creation) => {
-    if (__DEV__) {
-      console.log("[CreationsGalleryScreen] Card pressed", {
-        creationId: item.id,
-        hasOnViewResult: !!onViewResult
-      });
-    }
-    onViewResult?.(item);
-  }, [onViewResult]);
-
   const renderItem = useCallback(({ item }: { item: Creation }) => (
     <CreationCard
       creation={item}
       callbacks={{
         onPress: () => handleCardPress(item),
-        onShare: async () => handleShare(item),
+        onShare: async () => handleShareCard(item),
         onDelete: () => handleDelete(item),
         onFavorite: () => handleFavorite(item, !item.isFavorite),
       }}
     />
-  ), [handleShare, handleDelete, handleFavorite, handleCardPress]);
+  ), [handleShareCard, handleDelete, handleFavorite, handleCardPress]);
 
   const renderHeader = useMemo(() => {
     if ((!creations || creations.length === 0) && !isLoading) return null;
@@ -155,6 +166,30 @@ export function CreationsGalleryScreen({
     />
   ), [isLoading, creations, filters.isFiltered, tokens, t, config, emptyActionLabel, onEmptyAction, filters.clearAllFilters]);
 
+  // Show result preview when a creation is selected
+  if (selectedCreation && selectedImageUrl) {
+    return (
+      <ResultPreviewScreen
+        imageUrl={selectedImageUrl}
+        isSaving={isSaving}
+        isSharing={isSharing}
+        onDownload={handleDownload}
+        onShare={handleShare}
+        onTryAgain={handleTryAgain}
+        onNavigateBack={handleBack}
+        translations={{
+          title: t(config.translations.resultTitle ?? "result.title"),
+          yourResult: t(config.translations.resultLabel ?? "result.yourResult"),
+          saveButton: t("result.save"),
+          saving: t("result.saving"),
+          shareButton: t("result.share"),
+          sharing: t("result.sharing"),
+          tryAnother: t("result.tryAnother"),
+        }}
+      />
+    );
+  }
+
   return (
     <ScreenLayout scrollable={false}>
       <FlatList
@@ -163,10 +198,7 @@ export function CreationsGalleryScreen({
         keyExtractor={(item) => item.id}
         ListHeaderComponent={renderHeader}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[
-          styles.listContent, 
-          (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent
-        ]}
+        contentContainerStyle={[styles.listContent, (!filters.filtered || filters.filtered.length === 0) && styles.emptyContent]}
         showsVerticalScrollIndicator={false}
         refreshControl={<RefreshControl refreshing={isLoading} onRefresh={() => void refetch()} tintColor={tokens.colors.primary} />}
       />
@@ -177,7 +209,6 @@ export function CreationsGalleryScreen({
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1 },
   header: { borderBottomWidth: 1 },
   listContent: { paddingHorizontal: 16, paddingTop: 16 },
   emptyContent: { flexGrow: 1 },