@umituz/react-native-photo-editor 1.0.6 → 1.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -23,7 +23,8 @@
     "react-native": "*",
     "@umituz/react-native-design-system": "*",
     "react-native-gesture-handler": "*",
-    "react-native-reanimated": "*"
+    "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*"
   },
   "dependencies": {
     "expo-image-picker": "*",
@@ -40,6 +41,7 @@
     "typescript": "*",
     "react-native-gesture-handler": "*",
     "react-native-reanimated": "*",
+    "react-native-safe-area-context": "*",
     "expo-application": "*",
     "expo-device": "*",
     "expo-linear-gradient": "*"

package/src/PhotoEditor.tsx

@@ -20,6 +20,7 @@ import { TextEditorSheet } from "./components/TextEditorSheet";
 import { createEditorStyles } from "./styles";
 import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
 import { Layer } from "./types";
+import { DEFAULT_FONTS } from "./constants";
 
 export interface EditorActions {
   addTextLayer: (tokens: DesignTokens) => string;
@@ -36,10 +37,11 @@ export interface PhotoEditorProps {
   customTools?: React.ReactNode | ((actions: EditorActions) => React.ReactNode);
   initialCaption?: string;
   t: (key: string) => string;
+  fonts?: readonly string[];
+  stickers?: readonly string[];
+  showAI?: boolean;
 }
 
-const FONTS = ["Impact", "Comic", "Serif", "Retro"] as const;
-
 export const PhotoEditor: React.FC<PhotoEditorProps> = ({
   imageUri,
   onSave,
@@ -48,6 +50,9 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
   customTools,
   initialCaption,
   t,
+  fonts = DEFAULT_FONTS,
+  stickers,
+  showAI = false,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -118,7 +123,7 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
           <FontControls
             fontSize={fontSize}
             selectedFont={selectedFont}
-            fonts={FONTS}
+            fonts={fonts}
             onFontSizeChange={(s) => setFontSize(Math.max(12, Math.min(96, s)))}
             onFontSelect={setSelectedFont}
             styles={styles}
@@ -130,6 +135,7 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
           onAddSticker={() => stickerSheetRef.current?.present()}
           onOpenFilters={() => filterSheetRef.current?.present()}
           onOpenLayers={() => layerSheetRef.current?.present()}
+          onAIMagic={showAI ? undefined : undefined}
           styles={styles}
           t={t}
         />
@@ -144,7 +150,7 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
         </BottomSheetModal>
 
         <BottomSheetModal ref={stickerSheetRef} snapPoints={["50%"]}>
-          <StickerPicker onSelectSticker={handleSelectSticker} />
+          <StickerPicker stickers={stickers} onSelectSticker={handleSelectSticker} />
         </BottomSheetModal>
 
         <BottomSheetModal ref={filterSheetRef} snapPoints={["40%"]}>

package/src/components/EditorCanvas.tsx

@@ -78,3 +78,5 @@ export const EditorCanvas: React.FC<EditorCanvasProps> = ({
     </View>
   );
 };
+
+export default React.memo(EditorCanvas);

package/src/components/FilterPicker.tsx

@@ -5,24 +5,25 @@ import {
   AtomicIcon,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { DEFAULT_FILTERS, type FilterType } from "../constants";
 
-const FILTERS = [
-  { id: "none", name: "None", icon: "close-circle" as const, value: 0 },
-  { id: "sepia", name: "Sepia", icon: "color-palette" as const, value: 0.5 },
-  { id: "grayscale", name: "B&W", icon: "contrast" as const, value: 1 },
-  { id: "vintage", name: "Vintage", icon: "time" as const, value: 0.7 },
-  { id: "warm", name: "Warm", icon: "sunny" as const, value: 0.3 },
-  { id: "cool", name: "Cool", icon: "snow" as const, value: 0.3 },
-] as const;
+interface FilterOption {
+  id: FilterType;
+  name: string;
+  icon: string;
+  value: number;
+}
 
 interface FilterPickerProps {
   selectedFilter: string;
   onSelectFilter: (filterId: string, value: number) => void;
+  filters?: readonly FilterOption[];
 }
 
 export const FilterPicker: React.FC<FilterPickerProps> = ({
   selectedFilter,
   onSelectFilter,
+  filters = DEFAULT_FILTERS,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -65,7 +66,7 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
     <View style={styles.container}>
       <AtomicText style={styles.title}>Filters</AtomicText>
       <View style={styles.grid}>
-        {FILTERS.map((filter) => (
+        {filters.map((filter) => (
           <TouchableOpacity
             key={filter.id}
             style={[
@@ -75,7 +76,7 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
             onPress={() => onSelectFilter(filter.id, filter.value)}
           >
             <AtomicIcon
-              name={filter.icon}
+              name={filter.icon as "close-circle" | "color-palette" | "contrast" | "time" | "sunny" | "snow"}
               size="lg"
               color={selectedFilter === filter.id ? "primary" : "textSecondary"}
             />
@@ -93,3 +94,5 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
     </View>
   );
 };
+
+export default React.memo(FilterPicker);

package/src/components/FontControls.tsx

@@ -80,3 +80,5 @@ export const FontControls: React.FC<FontControlsProps> = ({
     </View>
   );
 };
+
+export default React.memo(FontControls);

package/src/components/StickerPicker.tsx

@@ -4,48 +4,16 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-
-const STICKERS = [
-  "😀",
-  "😂",
-  "🤣",
-  "😍",
-  "🥰",
-  "😎",
-  "🤯",
-  "🥳",
-  "😤",
-  "💀",
-  "🔥",
-  "❤️",
-  "💯",
-  "✨",
-  "🎉",
-  "🤡",
-  "👀",
-  "🙌",
-  "👏",
-  "💪",
-  "🤝",
-  "🙈",
-  "🐶",
-  "🐱",
-  "🦊",
-  "🐸",
-  "🌟",
-  "⭐",
-  "🌈",
-  "☀️",
-  "🌙",
-  "💫",
-];
+import { DEFAULT_STICKERS } from "../constants";
 
 interface StickerPickerProps {
   onSelectSticker: (sticker: string) => void;
+  stickers?: readonly string[];
 }
 
 export const StickerPicker: React.FC<StickerPickerProps> = ({
   onSelectSticker,
+  stickers = DEFAULT_STICKERS,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -78,9 +46,9 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
       <AtomicText style={styles.title}>Emoji</AtomicText>
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.grid}>
-          {STICKERS.map((sticker, index) => (
+          {stickers.map((sticker, index) => (
             <TouchableOpacity
-              key={index}
+              key={sticker || index}
               style={styles.sticker}
               onPress={() => onSelectSticker(sticker)}
             >
@@ -92,3 +60,5 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
     </View>
   );
 };
+
+export default React.memo(StickerPicker);

package/src/components/TextEditorSheet.tsx

@@ -61,3 +61,5 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
     </View>
   );
 };
+
+export default React.memo(TextEditorSheet);

package/src/constants.ts

@@ -0,0 +1,61 @@
+/**
+ * Default constants for Photo Editor
+ * These can be overridden via props
+ */
+
+export const DEFAULT_FONTS = ["Impact", "Comic", "Serif", "Retro"] as const;
+
+export const DEFAULT_STICKERS = [
+  "😀",
+  "😂",
+  "🤣",
+  "😍",
+  "🥰",
+  "😎",
+  "🤯",
+  "🥳",
+  "😤",
+  "💀",
+  "🔥",
+  "❤️",
+  "💯",
+  "✨",
+  "🎉",
+  "🤡",
+  "👀",
+  "🙌",
+  "👏",
+  "💪",
+  "🤝",
+  "🙈",
+  "🐶",
+  "🐱",
+  "🦊",
+  "🐸",
+  "🌟",
+  "⭐",
+  "🌈",
+  "☀️",
+  "🌙",
+  "💫",
+] as const;
+
+export type FilterType = "none" | "sepia" | "grayscale" | "vintage" | "warm" | "cool";
+
+export const DEFAULT_FILTERS = [
+  { id: "none" as FilterType, name: "None", icon: "close-circle", value: 0 },
+  { id: "sepia" as FilterType, name: "Sepia", icon: "color-palette", value: 0.5 },
+  { id: "grayscale" as FilterType, name: "B&W", icon: "contrast", value: 1 },
+  { id: "vintage" as FilterType, name: "Vintage", icon: "time", value: 0.7 },
+  { id: "warm" as FilterType, name: "Warm", icon: "sunny", value: 0.3 },
+  { id: "cool" as FilterType, name: "Cool", icon: "snow", value: 0.3 },
+] as const;
+
+export const DEFAULT_AI_STYLES = [
+  { id: "viral", label: "✨ Viral", desc: "Catchy & shareable" },
+  { id: "funny", label: "😂 Funny", desc: "Humor that connects" },
+  { id: "savage", label: "🔥 Savage", desc: "Bold & edgy" },
+  { id: "wholesome", label: "💕 Wholesome", desc: "Warm & positive" },
+  { id: "sarcastic", label: "😏 Sarcastic", desc: "Witty & ironic" },
+  { id: "relatable", label: "🎯 Relatable", desc: "Everyone gets it" },
+] as const;

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./types";
+export * from "./constants";
 export * from "./hooks/usePhotoEditor";
 export * from "./core/HistoryManager";
 export * from "./components/EditorCanvas";