@umituz/react-native-ai-creations 1.3.12 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.3.12",
+  "version": "1.4.0",
   "description": "AI-generated creations gallery with filtering, sharing, and management for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useState } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useSharing } from "@umituz/react-native-sharing";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -58,27 +58,9 @@ export function CreationsGalleryScreen({
     }, [refetch])
   );
 
-  // Translate types for Grid display & Filter
-  const translatedTypes = useMemo(() => {
-    return config.types.map(type => ({
-      ...type,
-      labelKey: t(type.labelKey)
-    }));
-  }, [config.types, t]);
-
-  const allCategories = useMemo(() => {
-    const categories: FilterCategory[] = [];
-    if (config.types.length > 0) {
-      categories.push({
-        id: 'type',
-        title: t(config.translations.filterTitle),
-        multiSelect: false,
-        options: config.types.map(type => ({ id: type.id, label: t(type.labelKey), icon: type.icon || 'image' }))
-      });
-    }
-    if (config.filterCategories) categories.push(...config.filterCategories);
-    return categories;
-  }, [config.types, config.filterCategories, t, config.translations.filterTitle]);
+  // Prepare data for UI using utils
+  const translatedTypes = useMemo(() => getTranslatedTypes(config, t), [config, t]);
+  const allCategories = useMemo(() => getFilterCategoriesFromConfig(config, t), [config, t]);
 
   const handleShare = useCallback(async (creation: Creation) => {
     share(creation.uri, { dialogTitle: t("common.share") });
@@ -148,18 +130,15 @@ export function CreationsGalleryScreen({
             onDelete={handleDelete}
             contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
           />
-          <ImageGallery
-            images={filtered.map(c => ({ uri: c.uri }))}
+          <CreationImageViewer
+            creations={filtered}
             visible={viewerVisible}
             index={viewerIndex}
             onDismiss={() => setViewerVisible(false)}
             onIndexChange={setViewerIndex}
-            {...(enableEditing && { enableEditing } as any)}
-            {...(onImageEdit && {
-              onImageChange: async (uri: string) => {
-                if (selectedCreation) { await onImageEdit(uri, (selectedCreation as Creation).id); refetch(); }
-              }
-            } as any)}
+            enableEditing={enableEditing}
+            onImageEdit={onImageEdit}
+            selectedCreationId={selectedCreation?.id}
           />
           <FilterBottomSheet
             ref={filterSheetRef}
@@ -177,6 +156,11 @@ export function CreationsGalleryScreen({
 
 
 
+import { View, StyleSheet, ActivityIndicator } from "react-native";
+
+// ... (logic remains same, just adding styles below)
+
 const useStyles = (tokens: any) => StyleSheet.create({
   container: { flex: 1, backgroundColor: tokens.colors.background },
+  center: { justifyContent: 'center', alignItems: 'center' },
 });