@umituz/react-native-ai-creations 1.4.2 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-creations",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "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

@@ -88,34 +88,24 @@ export function CreationsGalleryScreen({
     setSelectedCreation(creation);
   }, []);
 
-  if (selectedCreation) {
-    return (
-      <CreationDetailScreen
-        creation={selectedCreation}
-        onClose={() => setSelectedCreation(null)}
-        onShare={handleShare}
-        onDelete={handleDelete}
-        t={t}
-      />
-    );
-  }
-
   const styles = useStyles(tokens);
 
-  // 1. Loading State - Prevent header flash
-  if (isLoading && (!creations || creations.length === 0)) {
-    return (
-      <View style={[styles.container, styles.center]}>
-        <ActivityIndicator size="large" color={tokens.colors.primary} />
-      </View>
-    );
-  }
-
-  // 2. Pure Empty State - If no creations exist at all, don't show filters
-  if (!creations || creations.length === 0) {
-    return (
-      <View style={styles.container}>
-        <View style={[styles.container, { paddingTop: insets.top + tokens.spacing.md }]}>
+  // Define empty state content based on state
+  const renderEmptyComponent = useMemo(() => {
+    // 1. Loading State
+    if (isLoading && (!creations || creations?.length === 0)) {
+      return (
+        <View style={styles.centerContainer}>
+          <ActivityIndicator size="large" color={tokens.colors.primary} />
+        </View>
+      );
+    }
+
+    // 2. System Empty State (User has NO creations at all)
+    // We check 'creations' (the full list)
+    if (!creations || creations?.length === 0) {
+      return (
+        <View style={styles.centerContainer}>
           <EmptyState
             title={t(config.translations.empty)}
             description={t(config.translations.emptyDescription)}
@@ -123,54 +113,85 @@ export function CreationsGalleryScreen({
             onAction={onEmptyAction}
           />
         </View>
-      </View>
-    );
-  }
-
-  // 3. Gallery Content
-  return (
-    <View style={styles.container}>
-      <GalleryHeader
-        title={t(config.translations.title) || 'My Creations'}
-        count={filtered.length}
-        countLabel={t(config.translations.photoCount) || 'photos'}
-        isFiltered={isFiltered}
-        filterLabel={t(config.translations.filterLabel) || 'Filter'}
-        onFilterPress={() => filterSheetRef.current?.present()}
-        style={{ paddingTop: insets.top + tokens.spacing.md }}
-      />
+      );
+    }
 
-      {filtered.length === 0 ? (
+    // 3. Filter Empty State (User has creations, but filter returns none)
+    // We check 'filtered' (the displayed list)
+    return (
+      <View style={styles.centerContainer}>
         <EmptyState
           title={t("common.no_results") || "No results"}
           description={t("common.no_results_description") || "Try changing your filters"}
           actionLabel={t("common.clear_all") || "Clear All"}
           onAction={clearFilters}
         />
-      ) : (
-        <>
-          <CreationsGrid
-            creations={filtered}
-            types={translatedTypes}
-            isLoading={isLoading}
-            onRefresh={refetch}
-            onView={handleView}
-            onShare={handleShare}
-            onDelete={handleDelete}
-            contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
-          />
-          <CreationImageViewer
-            creations={filtered}
-            visible={viewerVisible}
-            index={viewerIndex}
-            onDismiss={() => setViewerVisible(false)}
-            onIndexChange={setViewerIndex}
-            enableEditing={enableEditing}
-            onImageEdit={onImageEdit}
-          />
-        </>
+      </View>
+    );
+  }, [isLoading, creations, config, t, emptyActionLabel, onEmptyAction, clearFilters, styles.centerContainer, tokens.colors.primary]);
+
+  if (selectedCreation) {
+    return (
+      <CreationDetailScreen
+        creation={selectedCreation}
+        onClose={() => setSelectedCreation(null)}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        t={t}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {/* Header is always shown unless we are in "System Empty" without data? 
+          User requested: "herhangi bir creations yoksa buradaki no creations gözükmeli" (if no creations, show no creations).
+          Currently we show header always, except logic below might hide it. 
+          Actually, let's keep header always visible IF we have creations. 
+          If !creations, we pass `renderEmptyComponent`, but Grid has header support. 
+          
+          However, to match previous request "filter gözükebilir" (filter can be visible), we'll keep header outside.
+          BUT, if NO creations, showing filter header is weird. 
+          
+          Let's conditonally render header: Only if we have creations OR loading. 
+          If loaded and 0 creations -> Hide header (Clean Empty State).
+      */}
+      {(!creations || creations?.length === 0) && !isLoading ? null : (
+        <GalleryHeader
+          title={t(config.translations.title) || 'My Creations'}
+          count={filtered.length}
+          countLabel={t(config.translations.photoCount) || 'photos'}
+          isFiltered={isFiltered}
+          filterLabel={t(config.translations.filterLabel) || 'Filter'}
+          onFilterPress={() => filterSheetRef.current?.present()}
+          style={{ paddingTop: insets.top + tokens.spacing.md }}
+        />
       )}
 
+      {/* Main Content Grid - handles empty/loading via ListEmptyComponent */}
+      <CreationsGrid
+        creations={filtered}
+        types={translatedTypes}
+        isLoading={isLoading}
+        onRefresh={refetch}
+        onView={handleView}
+        onShare={handleShare}
+        onDelete={handleDelete}
+        contentContainerStyle={{ paddingBottom: insets.bottom + tokens.spacing.xl }}
+        ListEmptyComponent={renderEmptyComponent}
+      />
+
+      <CreationImageViewer
+        creations={filtered}
+        visible={viewerVisible}
+        index={viewerIndex}
+        onDismiss={() => setViewerVisible(false)}
+        onIndexChange={setViewerIndex}
+        enableEditing={enableEditing}
+        onImageEdit={onImageEdit}
+        selectedCreationId={selectedCreation?.id}
+      />
+
       <FilterBottomSheet
         ref={filterSheetRef}
         categories={allCategories}
@@ -185,5 +206,11 @@ export function CreationsGalleryScreen({
 
 const useStyles = (tokens: any) => StyleSheet.create({
   container: { flex: 1, backgroundColor: tokens.colors.background },
-  center: { justifyContent: 'center', alignItems: 'center' },
+  centerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 400,
+    paddingHorizontal: tokens.spacing.xl
+  },
 });