@umituz/react-native-photo-editor 2.0.10 → 2.0.12

package/eslint.config.js

@@ -13,6 +13,9 @@ module.exports = [
         sourceType: "module",
         project: "./tsconfig.json",
       },
+      globals: {
+        console: "readonly",
+      },
     },
     plugins: {
       "@typescript-eslint": tseslint,
@@ -23,6 +26,7 @@ module.exports = [
       "@typescript-eslint/explicit-function-return-type": "off",
       "@typescript-eslint/no-explicit-any": "warn",
       "no-console": "off",
+      "no-undef": "off",
     },
   },
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -36,12 +36,23 @@
     "react-native-safe-area-context": ">=4.0.0"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^3.0.1",
+    "@react-navigation/bottom-tabs": "^7.15.5",
+    "@react-navigation/elements": "^2.9.10",
+    "@react-navigation/native": "^7.1.33",
+    "@react-navigation/stack": "^7.8.5",
+    "@tanstack/react-query": "^5.90.21",
     "@types/react": "^19.1.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "@umituz/react-native-design-system": "^4.25.90",
     "eslint": "^8.57.0",
+    "expo-clipboard": "^55.0.8",
+    "expo-crypto": "^55.0.9",
     "expo-file-system": "~19.0.21",
+    "expo-font": "^55.0.4",
+    "expo-haptics": "^55.0.8",
     "expo-image": "~3.0.11",
     "expo-image-picker": "~17.0.10",
     "expo-media-library": "~18.2.1",
@@ -49,6 +60,8 @@
     "react-native": "0.81.4",
     "react-native-gesture-handler": "^2.30.0",
     "react-native-safe-area-context": "^5.6.2",
-    "typescript": "^5.3.0"
+    "react-native-svg": "^15.15.3",
+    "typescript": "^5.3.0",
+    "uuid": "^13.0.0"
   }
 }

package/src/PhotoEditor.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 import { View, ScrollView, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { useSafeAreaInsets } from "@umituz/react-native-design-system/safe-area";
 
-import { EditorCanvas } from "./components/EditorCanvas";
+import EditorCanvas from "./components/EditorCanvas";
 import { EditorToolbar } from "./components/EditorToolbar";
 import { FontControls } from "./components/FontControls";
 import { LayerManager } from "./components/LayerManager";
@@ -19,19 +19,6 @@ import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
 import { Layer, ImageFilters } from "./types";
 import { DEFAULT_FONTS } from "./constants";
 
-export interface EditorActions {
-  addTextLayer: (defaultColor?: string) => string;
-  updateLayer: (id: string, updates: Partial<Layer>) => void;
-  duplicateLayer: (id: string) => string | null;
-  deleteLayer: (id: string) => void;
-  moveLayerUp: (id: string) => void;
-  moveLayerDown: (id: string) => void;
-  getLayers: () => Layer[];
-  getActiveLayerId: () => string | null;
-  undo: () => void;
-  redo: () => void;
-}
-
 export interface PhotoEditorProps {
   imageUri: string;
   /**
@@ -42,8 +29,8 @@ export interface PhotoEditorProps {
   onSave?: (uri: string, layers: Layer[], filters: ImageFilters) => void;
   onClose: () => void;
   title?: string;
-  /** Render extra tools below the canvas. Receives editor action helpers. */
-  customTools?: React.ReactNode | ((actions: EditorActions) => React.ReactNode);
+  /** Render extra tools below the canvas. Receives editor state helpers. */
+  customTools?: React.ReactNode | ((ui: ReturnType<typeof usePhotoEditorUI>) => React.ReactNode);
   initialCaption?: string;
   t: (key: string) => string;
   fonts?: readonly string[];
@@ -51,7 +38,7 @@ export interface PhotoEditorProps {
   onAICaption?: (style: string) => Promise<string> | void;
 }
 
-export const PhotoEditor: React.FC<PhotoEditorProps> = ({
+export function PhotoEditor({
   imageUri,
   onSave,
   onClose,
@@ -61,7 +48,7 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
   t,
   fonts = DEFAULT_FONTS,
   onAICaption,
-}) => {
+}: PhotoEditorProps) {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const styles = useMemo(
@@ -70,25 +57,11 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
   );
   const ui = usePhotoEditorUI(initialCaption);
 
-  const actions: EditorActions = useMemo(
-    () => ({
-      addTextLayer: (color?: string) =>
-        ui.addTextLayer(color ?? tokens.colors.textPrimary),
-      updateLayer: ui.updateLayer,
-      duplicateLayer: ui.duplicateLayer,
-      deleteLayer: ui.deleteLayer,
-      moveLayerUp: ui.moveLayerUp,
-      moveLayerDown: ui.moveLayerDown,
-      getLayers: () => ui.layers,
-      getActiveLayerId: () => ui.activeLayerId,
-      undo: ui.undo,
-      redo: ui.redo,
-    }),
-    [ui, tokens.colors.textPrimary],
+  const handleSave = useCallback(
+    () => onSave?.(imageUri, ui.layers, ui.filters),
+    [onSave, imageUri, ui.layers, ui.filters],
   );
 
-  const handleSave = () => onSave?.(imageUri, ui.layers, ui.filters);
-
   return (
     <View style={styles.container}>
       {/* Header */}
@@ -125,7 +98,7 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
           styles={styles}
         />
 
-        {typeof customTools === "function" ? customTools(actions) : customTools}
+        {typeof customTools === "function" ? customTools(ui) : customTools}
 
         <FontControls
           fontSize={ui.fontSize}
@@ -208,4 +181,4 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
       )}
     </View>
   );
-};
+}

package/src/hooks/useImagePicker.ts

@@ -34,7 +34,8 @@ export const useImagePicker = (): UseImagePickerReturn => {
       if (result.canceled || result.assets.length === 0) return null;
       const asset = result.assets[0];
       return { uri: asset.uri, width: asset.width, height: asset.height };
-    } catch {
+    } catch (error) {
+      console.error("[useImagePicker] Error picking from gallery:", error);
       return null;
     } finally {
       setLoading(false);
@@ -58,7 +59,8 @@ export const useImagePicker = (): UseImagePickerReturn => {
       if (result.canceled || result.assets.length === 0) return null;
       const asset = result.assets[0];
       return { uri: asset.uri, width: asset.width, height: asset.height };
-    } catch {
+    } catch (error) {
+      console.error("[useImagePicker] Error taking photo:", error);
       return null;
     } finally {
       setLoading(false);

package/src/hooks/usePhotoEditor.ts

@@ -15,7 +15,7 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   const layers = history.present;
 
   const pushState = useCallback(
-    (newLayers: Layer[]) => {
+    (newLayers: Layer[]): void => {
       setHistory((prev) => historyManager.push(prev, newLayers));
     },
     [historyManager],
@@ -73,17 +73,19 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   );
 
   const updateLayer = useCallback(
-    (id: string, updates: Partial<Layer>) => {
-      const newLayers = layers.map(
-        (l) => (l.id === id ? ({ ...l, ...updates } as Layer) : l),
-      );
+    (id: string, updates: Partial<Layer>): void => {
+      const newLayers = layers.map((l) => {
+        if (l.id !== id) return l;
+        // Type-safe merge: cast to Layer since we're merging valid Partial<Layer> with existing Layer
+        return { ...l, ...updates } as Layer;
+      });
       pushState(newLayers);
     },
     [layers, pushState],
   );
 
   const deleteLayer = useCallback(
-    (id: string) => {
+    (id: string): void => {
       const newLayers = layers.filter((l) => l.id !== id);
       pushState(newLayers);
       if (activeLayerId === id) {
@@ -94,11 +96,13 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   );
 
   const duplicateLayer = useCallback(
-    (id: string) => {
+    (id: string): string | null => {
       const layer = layers.find((l) => l.id === id);
       if (!layer) return null;
       const newId = `${layer.type}-${Date.now()}`;
-      const newLayer = { ...layer, id: newId, x: layer.x + 20, y: layer.y + 20, zIndex: layers.length };
+      // Calculate the next zIndex to avoid conflicts
+      const maxZIndex = layers.length > 0 ? Math.max(...layers.map((l) => l.zIndex)) : -1;
+      const newLayer = { ...layer, id: newId, x: layer.x + 20, y: layer.y + 20, zIndex: maxZIndex + 1 };
       pushState([...layers, newLayer]);
       setActiveLayerId(newId);
       return newId;
@@ -107,7 +111,7 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   );
 
   const moveLayerUp = useCallback(
-    (id: string) => {
+    (id: string): void => {
       const sorted = [...layers].sort((a, b) => a.zIndex - b.zIndex);
       const idx = sorted.findIndex((l) => l.id === id);
       if (idx >= sorted.length - 1) return;
@@ -131,19 +135,25 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   );
 
   const undo = useCallback(
-    () => setHistory((prev) => historyManager.undo(prev)),
+    (): void => setHistory((prev) => historyManager.undo(prev)),
     [historyManager],
   );
 
   const redo = useCallback(
-    () => setHistory((prev) => historyManager.redo(prev)),
+    (): void => setHistory((prev) => historyManager.redo(prev)),
     [historyManager],
   );
 
+  // Memoize return object to prevent infinite re-renders
+  const sortedLayers = useMemo(() => [...layers].sort((a, b) => a.zIndex - b.zIndex), [layers]);
+  const activeLayer = useMemo(() => layers.find((l) => l.id === activeLayerId), [layers, activeLayerId]);
+  const canUndo = useMemo(() => historyManager.canUndo(history), [history]);
+  const canRedo = useMemo(() => historyManager.canRedo(history), [history]);
+
   return {
-    layers: [...layers].sort((a, b) => a.zIndex - b.zIndex),
+    layers: sortedLayers,
     activeLayerId,
-    activeLayer: layers.find((l) => l.id === activeLayerId),
+    activeLayer,
     addTextLayer,
     addStickerLayer,
     updateLayer,
@@ -154,8 +164,8 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
     selectLayer: setActiveLayerId,
     undo,
     redo,
-    canUndo: historyManager.canUndo(history),
-    canRedo: historyManager.canRedo(history),
+    canUndo,
+    canRedo,
     filters,
     updateFilters: setFilters,
   };

package/src/hooks/usePhotoEditorUI.ts

@@ -34,16 +34,18 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
   const editor = usePhotoEditor([]);
 
   // Apply initial caption once on mount — single history entry
-  const initialCaptionApplied = useRef(false);
+  const prevInitialCaptionRef = useRef<string | undefined>(undefined);
+
   useEffect(() => {
-    if (initialCaption && !initialCaptionApplied.current) {
-      initialCaptionApplied.current = true;
+    // Only apply if initialCaption changed and is different from previous value
+    if (initialCaption && initialCaption !== prevInitialCaptionRef.current) {
+      prevInitialCaptionRef.current = initialCaption;
       editor.addTextLayer(tokens.colors.textPrimary, { text: initialCaption });
     }
-  }, []);
+  }, [initialCaption, editor]);
 
   const handleTextLayerTap = useCallback(
-    (layerId: string) => {
+    (layerId: string): void => {
       editor.selectLayer(layerId);
       const layer = editor.layers.find((l) => l.id === layerId);
       if (layer?.type === "text") {
@@ -60,7 +62,7 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
     [editor, tokens.colors.textPrimary],
   );
 
-  const handleSaveText = useCallback(() => {
+  const handleSaveText = useCallback((): void => {
     if (editor.activeLayerId) {
       editor.updateLayer(editor.activeLayerId, {
         text: editingText,
@@ -85,7 +87,7 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
   ]);
 
   const handleSelectFilter = useCallback(
-    (option: FilterOption) => {
+    (option: FilterOption): void => {
       setSelectedFilter(option.id);
       const newFilters: ImageFilters = { ...DEFAULT_IMAGE_FILTERS, ...option.filters };
       editor.updateFilters(newFilters);
@@ -95,7 +97,7 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
   );
 
   const handleLayerTransform = useCallback(
-    (layerId: string, transform: LayerTransform) => {
+    (layerId: string, transform: LayerTransform): void => {
       editor.updateLayer(layerId, {
         x: transform.x,
         y: transform.y,
@@ -138,7 +140,7 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
     handleSaveText,
     handleSelectFilter,
     handleLayerTransform,
-    handleAddText: useCallback(() => {
+    handleAddText: useCallback((): void => {
       const color = tokens.colors.textPrimary;
       setEditingText("");
       setEditingColor(color);
@@ -152,7 +154,7 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
       });
       textEditorSheetRef.current?.present();
     }, [editor, fontSize, selectedFont, tokens.colors.textPrimary]),
-    handleSelectSticker: useCallback((uri: string) => {
+    handleSelectSticker: useCallback((uri: string): void => {
       editor.addStickerLayer(uri);
       stickerSheetRef.current?.dismiss();
     }, [editor]),

package/src/index.ts

@@ -1,20 +1,9 @@
+// Public API exports
+export { PhotoEditor } from "./PhotoEditor";
+export type { PhotoEditorProps } from "./PhotoEditor";
+
+// Type exports for consumer usage
 export * from "./types";
+
+// Constant exports for consumer customization
 export * from "./constants";
-export * from "./hooks/usePhotoEditor";
-export * from "./hooks/usePhotoEditorUI";
-export * from "./hooks/useImagePicker";
-export * from "./utils/mediaUtils";
-export * from "./core/HistoryManager";
-export * from "./components/EditorCanvas";
-export * from "./components/LayerManager";
-export * from "./components/FontControls";
-export * from "./components/FilterPicker";
-export * from "./components/DraggableText";
-export * from "./components/DraggableSticker";
-export * from "./components/AIMagicSheet";
-export * from "./components/TextEditorSheet";
-export * from "./components/StickerPicker";
-export * from "./components/EditorToolbar";
-export * from "./components/ColorPicker";
-export * from "./components/AdjustmentsSheet";
-export * from "./PhotoEditor";

package/src/types.ts

@@ -59,3 +59,12 @@ export interface EditorState {
   canvasSize: { width: number; height: number };
   filters: ImageFilters;
 }
+
+// Type guards for discriminating union types
+export function isTextLayer(layer: Layer): layer is TextLayer {
+  return layer.type === "text";
+}
+
+export function isStickerLayer(layer: Layer): layer is StickerLayer {
+  return layer.type === "sticker";
+}

package/src/utils/mediaUtils.ts

@@ -63,7 +63,8 @@ export const deleteLocalFile = async (uri: string): Promise<void> => {
     if (file.exists) {
       file.delete();
     }
-  } catch {
-    // silent — best-effort cleanup
+  } catch (error) {
+    // Best-effort cleanup — log but don't throw
+    console.warn("[mediaUtils] Failed to delete local file:", uri, error);
   }
 };

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2020",
     "lib": ["ES2020"],
+    "module": "ESNext",
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": true,