@umituz/react-native-ai-generation-content 1.17.118 → 1.17.119

package/package.json

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

package/src/domains/creations/presentation/components/CreationDetail/DetailImage.tsx

@@ -1,26 +1,37 @@
 import React from 'react';
-import { View, StyleSheet, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, useWindowDimensions, TouchableOpacity } from 'react-native';
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { Image } from 'expo-image';
 
 interface DetailImageProps {
     readonly uri: string;
+    readonly onPress?: () => void;
 }
 
 const HORIZONTAL_PADDING = 16;
 const ASPECT_RATIO = 16 / 9;
 
-export const DetailImage: React.FC<DetailImageProps> = ({ uri }) => {
+export const DetailImage: React.FC<DetailImageProps> = ({ uri, onPress }) => {
     const tokens = useAppDesignTokens();
     const { width } = useWindowDimensions();
     const imageWidth = width - (HORIZONTAL_PADDING * 2);
     const imageHeight = imageWidth / ASPECT_RATIO;
 
+    const content = (
+        <View style={[styles.frame, { width: imageWidth, height: imageHeight, backgroundColor: tokens.colors.surface }]}>
+            <Image source={{ uri }} style={styles.image} contentFit="cover" />
+        </View>
+    );
+
     return (
         <View style={styles.container}>
-            <View style={[styles.frame, { width: imageWidth, height: imageHeight, backgroundColor: tokens.colors.surface }]}>
-                <Image source={{ uri }} style={styles.image} contentFit="cover" />
-            </View>
+            {onPress ? (
+                <TouchableOpacity activeOpacity={0.9} onPress={onPress}>
+                    {content}
+                </TouchableOpacity>
+            ) : (
+                content
+            )}
         </View>
     );
 };

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

@@ -1,7 +1,8 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { View, ScrollView, StyleSheet } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { ImageGallery } from "@umituz/react-native-image";
 import type { Creation } from '../../domain/entities/Creation';
 import type { CreationsConfig } from '../../domain/value-objects/CreationsConfig';
 import { hasVideoContent, getPreviewUrl } from '../../domain/utils';
@@ -41,6 +42,15 @@ 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;
@@ -81,7 +91,7 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
                 {isVideo ? (
                     <DetailVideo videoUrl={videoUrl} thumbnailUrl={thumbnailUrl} />
                 ) : (
-                    <DetailImage uri={creation.uri} />
+                    <DetailImage uri={creation.uri} onPress={handleImagePress} />
                 )}
 
                 {story ? (
@@ -95,6 +105,15 @@ export const CreationDetailScreen: React.FC<CreationDetailScreenProps> = ({
                     deleteLabel={t("common.delete")}
                 />
             </ScrollView>
+
+            {!isVideo && (
+                <ImageGallery
+                    images={[{ uri: creation.uri }]}
+                    visible={showFullScreen}
+                    onDismiss={handleDismissFullScreen}
+                    index={0}
+                />
+            )}
         </View>
     );
 };