@umituz/react-native-photo-editor 2.0.1 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/AIMagicSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon, AtomicButton } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -21,7 +21,7 @@ export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
   const [selected, setSelected] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     header: { flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm },
     grid: { gap: tokens.spacing.sm },
@@ -39,7 +39,7 @@ export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
       backgroundColor: tokens.colors.primary + "10",
     },
     info: { flex: 1, marginLeft: tokens.spacing.sm },
-  });
+  }), [tokens]);
 
   const handleGenerate = async () => {
     if (!selected || !onGenerateCaption) return;

package/src/components/EditorCanvas.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet } from "react-native";
 import { Image } from "expo-image";
 import { DraggableText, LayerTransform } from "./DraggableText";
 import { DraggableSticker } from "./DraggableSticker";
-import { Layer, TextLayer, StickerLayer, ImageFilters } from "../types";
+import { Layer, ImageFilters } from "../types";
 
 interface EditorCanvasProps {
   imageUrl: string;
@@ -60,39 +60,37 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
 
       {layers.map((layer) => {
         if (layer.type === "text") {
-          const textLayer = layer as TextLayer;
           return (
             <DraggableText
               key={layer.id}
-              text={textLayer.text || "Tap to edit"}
-              color={textLayer.color}
-              fontSize={textLayer.fontSize}
-              fontFamily={textLayer.fontFamily}
-              textAlign={textLayer.textAlign}
-              rotation={textLayer.rotation}
-              scale={textLayer.scale}
-              opacity={textLayer.opacity}
-              backgroundColor={textLayer.backgroundColor}
-              isBold={textLayer.isBold}
-              isItalic={textLayer.isItalic}
-              initialX={textLayer.x}
-              initialY={textLayer.y}
+              text={layer.text || "Tap to edit"}
+              color={layer.color}
+              fontSize={layer.fontSize}
+              fontFamily={layer.fontFamily}
+              textAlign={layer.textAlign}
+              rotation={layer.rotation}
+              scale={layer.scale}
+              opacity={layer.opacity}
+              backgroundColor={layer.backgroundColor}
+              isBold={layer.isBold}
+              isItalic={layer.isItalic}
+              initialX={layer.x}
+              initialY={layer.y}
               onTransformEnd={(t) => onLayerTransform(layer.id, t)}
               onPress={() => onLayerTap(layer.id)}
               isSelected={activeLayerId === layer.id}
             />
           );
         } else if (layer.type === "sticker") {
-          const stickerLayer = layer as StickerLayer;
           return (
             <DraggableSticker
               key={layer.id}
-              uri={stickerLayer.uri}
-              initialX={stickerLayer.x}
-              initialY={stickerLayer.y}
-              rotation={stickerLayer.rotation}
-              scale={stickerLayer.scale}
-              opacity={stickerLayer.opacity}
+              uri={layer.uri}
+              initialX={layer.x}
+              initialY={layer.y}
+              rotation={layer.rotation}
+              scale={layer.scale}
+              opacity={layer.opacity}
               onTransformEnd={(t) => onLayerTransform(layer.id, t)}
               onPress={() => onLayerTap(layer.id)}
               isSelected={activeLayerId === layer.id}

package/src/components/EditorToolbar.tsx

@@ -30,7 +30,6 @@ const ToolButton = ({
   onPress,
   isActive,
   disabled,
-  tokens,
   parentStyles,
 }: {
   icon: string;
@@ -38,7 +37,6 @@ const ToolButton = ({
   onPress: () => void;
   isActive?: boolean;
   disabled?: boolean;
-  tokens: ReturnType<typeof useAppDesignTokens>;
   parentStyles: EditorToolbarProps["styles"];
 }) => (
   <TouchableOpacity
@@ -84,28 +82,25 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
       {onUndo && (
         <ToolButton
           icon="arrow-back"
-          label={t("editor.undo") || "Undo"}
+          label={t("photo_editor.undo") || "Undo"}
           onPress={onUndo}
           disabled={!canUndo}
-          tokens={tokens}
           parentStyles={parentStyles}
         />
       )}
 
       <ToolButton
         icon="edit"
-        label={t("editor.text") || "Text"}
+        label={t("photo_editor.text") || "Text"}
         onPress={onAddText}
-        tokens={tokens}
         parentStyles={parentStyles}
       />
 
       {onAddSticker && (
         <ToolButton
           icon="sparkles"
-          label={t("editor.sticker") || "Sticker"}
+          label={t("photo_editor.sticker") || "Sticker"}
           onPress={onAddSticker}
-          tokens={tokens}
           parentStyles={parentStyles}
         />
       )}
@@ -124,9 +119,8 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
       {onOpenAdjustments && (
         <ToolButton
           icon="flash"
-          label={t("editor.adjust") || "Adjust"}
+          label={t("photo_editor.adjust") || "Adjust"}
           onPress={onOpenAdjustments}
-          tokens={tokens}
           parentStyles={parentStyles}
         />
       )}
@@ -134,28 +128,25 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
       {onOpenFilters && (
         <ToolButton
           icon="brush"
-          label={t("editor.filters") || "Filters"}
+          label={t("photo_editor.filters") || "Filters"}
           onPress={onOpenFilters}
-          tokens={tokens}
           parentStyles={parentStyles}
         />
       )}
 
       <ToolButton
         icon="copy"
-        label={t("editor.layers") || "Layers"}
+        label={t("photo_editor.layers") || "Layers"}
         onPress={onOpenLayers}
-        tokens={tokens}
         parentStyles={parentStyles}
       />
 
       {onRedo && (
         <ToolButton
           icon="chevron-forward"
-          label={t("editor.redo") || "Redo"}
+          label={t("photo_editor.redo") || "Redo"}
           onPress={onRedo}
           disabled={!canRedo}
-          tokens={tokens}
           parentStyles={parentStyles}
         />
       )}

package/src/components/FilterPicker.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -17,7 +17,7 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     filter: {
@@ -34,7 +34,7 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
       borderColor: tokens.colors.primary,
       backgroundColor: tokens.colors.primary + "10",
     },
-  });
+  }), [tokens]);
 
   return (
     <View style={styles.container}>

package/src/components/FontControls.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -32,7 +32,7 @@ export const FontControls: React.FC<FontControlsProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     stepRow: {
       flexDirection: "row",
       gap: tokens.spacing.sm,
@@ -58,7 +58,7 @@ export const FontControls: React.FC<FontControlsProps> = ({
       alignItems: "center",
       gap: tokens.spacing.xs,
     },
-  });
+  }), [tokens]);
 
   return (
     <View style={externalStyles.controlsPanel}>

package/src/components/LayerManager.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -27,7 +27,7 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     item: {
       flexDirection: "row",
@@ -53,7 +53,7 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
       padding: tokens.spacing.xs,
       borderRadius: tokens.borders.radius.sm,
     },
-  });
+  }), [tokens]);
 
   const sortedLayers = [...layers].reverse(); // top layer first in list
 
@@ -73,7 +73,7 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
             const isActive = activeLayerId === layer.id;
             const label =
               layer.type === "text"
-                ? (layer as TextLayer).text || t("editor.untitled") || "Untitled"
+                ? (layer as TextLayer).text || t("photo_editor.untitled") || "Untitled"
                 : "Sticker";
             const isTop = idx === 0;
             const isBottom = idx === sortedLayers.length - 1;

package/src/components/StickerPicker.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -15,7 +15,7 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     sticker: {
@@ -26,7 +26,7 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
       alignItems: "center",
       justifyContent: "center",
     },
-  });
+  }), [tokens]);
 
   return (
     <View style={styles.container}>

package/src/components/TextEditorSheet.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -42,7 +42,7 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     input: {
       backgroundColor: tokens.colors.surfaceVariant,
@@ -72,16 +72,16 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
       borderColor: tokens.colors.primary,
       backgroundColor: tokens.colors.primary + "20",
     },
-  });
+  }), [tokens]);
 
   return (
     <View style={styles.container}>
-      <AtomicText type="headlineSmall">{t("editor.add_text") || "Edit Text"}</AtomicText>
+      <AtomicText type="headlineSmall">{t("photo_editor.add_text") || "Edit Text"}</AtomicText>
 
       <TextInput
         value={value}
         onChangeText={onChange}
-        placeholder={t("editor.tap_to_edit") || "Enter text…"}
+        placeholder={t("photo_editor.tap_to_edit") || "Enter text…"}
         placeholderTextColor={tokens.colors.textSecondary}
         style={styles.input}
         multiline

package/src/hooks/useImagePicker.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import * as ImagePicker from "expo-image-picker";
 
 export interface ImagePickerResult {
@@ -16,7 +16,7 @@ export interface UseImagePickerReturn {
 export const useImagePicker = (): UseImagePickerReturn => {
   const [loading, setLoading] = useState(false);
 
-  const pickFromGallery = async (
+  const pickFromGallery = useCallback(async (
     options?: ImagePicker.ImagePickerOptions,
   ): Promise<ImagePickerResult | null> => {
     setLoading(true);
@@ -39,9 +39,9 @@ export const useImagePicker = (): UseImagePickerReturn => {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
-  const takePhoto = async (
+  const takePhoto = useCallback(async (
     options?: ImagePicker.ImagePickerOptions,
   ): Promise<ImagePickerResult | null> => {
     setLoading(true);
@@ -63,7 +63,7 @@ export const useImagePicker = (): UseImagePickerReturn => {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   return { pickFromGallery, takePhoto, loading };
 };

package/src/hooks/usePhotoEditorUI.ts

@@ -40,7 +40,6 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
       initialCaptionApplied.current = true;
       editor.addTextLayer(tokens.colors.textPrimary, { text: initialCaption });
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleTextLayerTap = useCallback(
@@ -152,12 +151,10 @@ export const usePhotoEditorUI = (initialCaption?: string) => {
         fontFamily: selectedFont,
       });
       textEditorSheetRef.current?.present();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editor, fontSize, selectedFont, tokens.colors.textPrimary]),
     handleSelectSticker: useCallback((uri: string) => {
       editor.addStickerLayer(uri);
       stickerSheetRef.current?.dismiss();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editor]),
   };
 };