@phucprime/react-native-image-editor 1.0.0

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kDAAkD;IAClD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wDAAwD;AACxD,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,SAAS,GACT,MAAM,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAEpB;;;OAGG;IACH,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IAEjC;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAEhC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAuCD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,cAAM,WAAW;IACf;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAgC5C;;;;;;OAMG;IACH,MAAM,CAAC,IAAI,CACT,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,GAChE,OAAO,CAAC,MAAM,CAAC;IAYlB;;OAEG;IACH,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;CAG7C;AAED;;GAEG;AACH,QAAA,MAAM,WAAW,oBAAc,CAAC;AAEhC,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,CAAC;AACpC,eAAe,WAAW,CAAC;AAG3B,mDAAmD;AACnD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AACjD,qDAAqD;AACrD,MAAM,MAAM,QAAQ,GAAG,mBAAmB,CAAC"}

package/lib/index.js

@@ -0,0 +1,114 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhotoEditor = exports.ImageEditor = void 0;
+const react_native_1 = require("react-native");
+const { RNPhotoEditor } = react_native_1.NativeModules;
+/** Default color palette for the editor. */
+const DEFAULT_COLORS = [
+    '#000000',
+    '#808080',
+    '#a9a9a9',
+    '#FFFFFE',
+    '#0000ff',
+    '#00ff00',
+    '#ff0000',
+    '#ffff00',
+    '#ffa500',
+    '#800080',
+    '#00ffff',
+    '#a52a2a',
+    '#ff00ff',
+];
+/** Default localization strings. */
+const DEFAULT_LANGUAGES = {
+    doneTitle: 'Done',
+    saveTitle: 'Save',
+    clearAllTitle: 'Clear all',
+    cameraTitle: 'Camera',
+    galleryTitle: 'Gallery',
+    uploadDialogTitle: 'Upload Image',
+    uploadPickerTitle: 'Select Picture',
+    directoryCreateFail: 'Failed to create directory',
+    accessMediaPermissionsMsg: 'To attach photos, we need to access media on your device',
+    continueTxt: 'Continue',
+    notNow: 'NOT NOW',
+    mediaAccessDeniedMsg: 'You denied storage access, no photos will be added.',
+    saveImageSucceed: 'Image saved',
+    eraserTitle: 'Eraser',
+};
+/**
+ * React Native Image Editor - Native photo editing bridge for iOS and Android.
+ *
+ * @example
+ * ```ts
+ * import { ImageEditor } from '@phucprime/react-native-image-editor';
+ *
+ * // Callback-based usage
+ * ImageEditor.open({
+ *   path: '/path/to/image.jpg',
+ *   onDone: (editedPath) => console.log('Edited:', editedPath),
+ *   onCancel: () => console.log('Cancelled'),
+ * });
+ *
+ * // Promise-based usage
+ * const editedPath = await ImageEditor.edit('/path/to/image.jpg', {
+ *   colors: ['#ff0000', '#00ff00', '#0000ff'],
+ * });
+ * ```
+ */
+class ImageEditor {
+    /**
+     * Open the image editor with callback-based API.
+     *
+     * @param config - Editor configuration options.
+     */
+    static open(config) {
+        const { stickers = [], hiddenControls = [], colors = DEFAULT_COLORS, languages, onDone, onCancel } = config, rest = __rest(config, ["stickers", "hiddenControls", "colors", "languages", "onDone", "onCancel"]);
+        const mergedLanguages = languages
+            ? Object.assign(Object.assign({}, DEFAULT_LANGUAGES), languages) : DEFAULT_LANGUAGES;
+        RNPhotoEditor.Edit(Object.assign({ colors,
+            hiddenControls,
+            stickers, languages: mergedLanguages }, rest), (imagePath) => {
+            onDone === null || onDone === void 0 ? void 0 : onDone(imagePath);
+        }, (resultCode) => {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel(resultCode);
+        });
+    }
+    /**
+     * Edit an image and return a promise with the edited image path.
+     *
+     * @param path - Path to the image file to edit.
+     * @param options - Optional editor configuration (excluding path, onDone, onCancel).
+     * @returns Promise that resolves with the edited image path, or rejects if cancelled.
+     */
+    static edit(path, options) {
+        return new Promise((resolve, reject) => {
+            ImageEditor.open(Object.assign(Object.assign({}, options), { path, onDone: resolve, onCancel: (resultCode) => reject(new Error(`Editor cancelled with code: ${resultCode}`)) }));
+        });
+    }
+    /**
+     * @deprecated Use `ImageEditor.open()` instead. This method is kept for backward compatibility.
+     */
+    static Edit(config) {
+        ImageEditor.open(config);
+    }
+}
+exports.ImageEditor = ImageEditor;
+/**
+ * @deprecated Use `ImageEditor` instead. `PhotoEditor` is an alias kept for backward compatibility.
+ */
+const PhotoEditor = ImageEditor;
+exports.PhotoEditor = PhotoEditor;
+exports.default = ImageEditor;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+CAAuD;AAEvD,MAAM,EAAE,aAAa,EAAE,GAAG,4BAAa,CAAC;AA4FxC,4CAA4C;AAC5C,MAAM,cAAc,GAAa;IAC/B,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF,oCAAoC;AACpC,MAAM,iBAAiB,GAAkC;IACvD,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,aAAa,EAAE,WAAW;IAC1B,WAAW,EAAE,QAAQ;IACrB,YAAY,EAAE,SAAS;IACvB,iBAAiB,EAAE,cAAc;IACjC,iBAAiB,EAAE,gBAAgB;IACnC,mBAAmB,EAAE,4BAA4B;IACjD,yBAAyB,EACvB,0DAA0D;IAC5D,WAAW,EAAE,UAAU;IACvB,MAAM,EAAE,SAAS;IACjB,oBAAoB,EAClB,qDAAqD;IACvD,gBAAgB,EAAE,aAAa;IAC/B,WAAW,EAAE,QAAQ;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW;IACf;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,MAAyB;QACnC,MAAM,EACJ,QAAQ,GAAG,EAAE,EACb,cAAc,GAAG,EAAE,EACnB,MAAM,GAAG,cAAc,EACvB,SAAS,EACT,MAAM,EACN,QAAQ,KAEN,MAAM,EADL,IAAI,UACL,MAAM,EARJ,2EAQL,CAAS,CAAC;QAEX,MAAM,eAAe,GAAG,SAAS;YAC/B,CAAC,iCAAM,iBAAiB,GAAK,SAAS,EACtC,CAAC,CAAC,iBAAiB,CAAC;QAEtB,aAAa,CAAC,IAAI,iBAEd,MAAM;YACN,cAAc;YACd,QAAQ,EACR,SAAS,EAAE,eAAe,IACvB,IAAI,GAET,CAAC,SAAiB,EAAE,EAAE;YACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,SAAS,CAAC,CAAC;QACtB,CAAC,EACD,CAAC,UAAkB,EAAE,EAAE;YACrB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,UAAU,CAAC,CAAC;QACzB,CAAC,CACF,CAAC;IACJ,CAAC;IAED;;;;;;OAMG;IACH,MAAM,CAAC,IAAI,CACT,IAAY,EACZ,OAAiE;QAEjE,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;YACrC,WAAW,CAAC,IAAI,iCACX,OAAO,KACV,IAAI,EACJ,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,CAAC,UAAU,EAAE,EAAE,CACvB,MAAM,CAAC,IAAI,KAAK,CAAC,+BAA+B,UAAU,EAAE,CAAC,CAAC,IAChE,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,IAAI,CAAC,MAAyB;QACnC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC;CACF;AAOQ,kCAAW;AALpB;;GAEG;AACH,MAAM,WAAW,GAAG,WAAW,CAAC;AAEV,kCAAW;AACjC,kBAAe,WAAW,CAAC"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@phucprime/react-native-image-editor",
+  "version": "1.0.0",
+  "description": "React Native: Native Image Editor for iOS and Android with drawing, text, stickers, cropping and more",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index.ts",
+  "files": [
+    "src/",
+    "lib/",
+    "ios/",
+    "android/",
+    "react-native-image-editor.podspec",
+    "!android/build/",
+    "!ios/build/",
+    "!**/__tests__/"
+  ],
+  "homepage": "https://github.com/phucprime/react-native-image-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/phucprime/react-native-image-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/phucprime/react-native-image-editor/issues"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "lint": "prettier --check src/",
+    "format": "prettier --write src/",
+    "clean": "rm -rf lib/",
+    "prepare": "npm run clean && npm run build",
+    "release": "npm run prepare && npm publish --access public"
+  },
+  "keywords": [
+    "react-native",
+    "image-editor",
+    "photo-editor",
+    "image",
+    "photo",
+    "editor",
+    "crop",
+    "draw",
+    "sticker",
+    "text",
+    "ios",
+    "android"
+  ],
+  "author": "phucprime",
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    },
+    "react-native": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "prettier": "^3.2.0",
+    "typescript": "^5.3.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/react-native-image-editor.podspec

@@ -0,0 +1,39 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name = "react-native-image-editor"
+  s.version = package["version"]
+  s.summary = package["description"]
+  s.homepage = package["homepage"]
+  s.license = package["license"]
+  s.authors = package["author"]
+  s.platforms = { :ios => "13.0" }
+  s.source = { :git => "https://github.com/phucprime/react-native-image-editor.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+  s.dependency "iOSPhotoEditor"
+
+  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
+  if respond_to?(:install_modules_dependencies, true)
+    install_modules_dependencies(s)
+  else
+    s.dependency "React-Core"
+
+    # Don't install the dependencies when we run `pod install` in the old architecture.
+    if ENV["RCT_NEW_ARCH_ENABLED"] == "1"
+      s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+      s.pod_target_xcconfig = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
+      }
+      s.dependency "React-Codegen"
+      s.dependency "RCT-Folly"
+      s.dependency "RCTRequired"
+      s.dependency "RCTTypeSafety"
+      s.dependency "ReactCommon/turbomodule/core"
+    end
+  end
+end

package/src/index.ts

@@ -0,0 +1,232 @@
+import { NativeModules, Platform } from 'react-native';
+
+const { RNPhotoEditor } = NativeModules;
+
+/**
+ * Localization strings for the image editor UI.
+ */
+export interface ImageEditorLanguage {
+  /** Title for the "Done" button */
+  doneTitle?: string;
+  /** Title for the "Save" button */
+  saveTitle?: string;
+  /** Title for the "Clear All" button */
+  clearAllTitle?: string;
+  /** Title for the "Camera" option */
+  cameraTitle?: string;
+  /** Title for the "Gallery" option */
+  galleryTitle?: string;
+  /** Title for the upload dialog */
+  uploadDialogTitle?: string;
+  /** Title for the upload picker */
+  uploadPickerTitle?: string;
+  /** Message shown when directory creation fails */
+  directoryCreateFail?: string;
+  /** Message requesting media access permissions */
+  accessMediaPermissionsMsg?: string;
+  /** Label for the "Continue" button */
+  continueTxt?: string;
+  /** Label for the "Not Now" button */
+  notNow?: string;
+  /** Message shown when media access is denied */
+  mediaAccessDeniedMsg?: string;
+  /** Message shown when image save succeeds */
+  saveImageSucceed?: string;
+  /** Title for the "Eraser" tool */
+  eraserTitle?: string;
+}
+
+/** Editor control types that can be shown or hidden. */
+export type EditorControl =
+  | 'text'
+  | 'clear'
+  | 'draw'
+  | 'save'
+  | 'share'
+  | 'sticker'
+  | 'crop';
+
+/**
+ * Configuration options for the image editor.
+ */
+export interface ImageEditorConfig {
+  /** Path to the image file to edit (required). */
+  path: string;
+
+  /**
+   * Array of hex color strings available for drawing and text.
+   * @default ['#000000', '#808080', '#a9a9a9', '#FFFFFE', '#0000ff', '#00ff00', '#ff0000', '#ffff00', '#ffa500', '#800080', '#00ffff', '#a52a2a', '#ff00ff']
+   */
+  colors?: string[];
+
+  /**
+   * Array of sticker image names to show in the sticker picker.
+   * Images must be added to native project resources.
+   * - iOS: Add to Resources folder
+   * - Android: Add to drawable folder
+   * @default []
+   */
+  stickers?: string[];
+
+  /**
+   * Array of editor controls to hide.
+   * @default []
+   */
+  hiddenControls?: EditorControl[];
+
+  /**
+   * Localization strings for the editor UI.
+   */
+  languages?: ImageEditorLanguage;
+
+  /**
+   * Callback invoked when editing is complete.
+   * @param imagePath - The path to the edited image file.
+   */
+  onDone?: (imagePath: string) => void;
+
+  /**
+   * Callback invoked when editing is cancelled.
+   * @param resultCode - The native result code.
+   */
+  onCancel?: (resultCode: number) => void;
+}
+
+/** Default color palette for the editor. */
+const DEFAULT_COLORS: string[] = [
+  '#000000',
+  '#808080',
+  '#a9a9a9',
+  '#FFFFFE',
+  '#0000ff',
+  '#00ff00',
+  '#ff0000',
+  '#ffff00',
+  '#ffa500',
+  '#800080',
+  '#00ffff',
+  '#a52a2a',
+  '#ff00ff',
+];
+
+/** Default localization strings. */
+const DEFAULT_LANGUAGES: Required<ImageEditorLanguage> = {
+  doneTitle: 'Done',
+  saveTitle: 'Save',
+  clearAllTitle: 'Clear all',
+  cameraTitle: 'Camera',
+  galleryTitle: 'Gallery',
+  uploadDialogTitle: 'Upload Image',
+  uploadPickerTitle: 'Select Picture',
+  directoryCreateFail: 'Failed to create directory',
+  accessMediaPermissionsMsg:
+    'To attach photos, we need to access media on your device',
+  continueTxt: 'Continue',
+  notNow: 'NOT NOW',
+  mediaAccessDeniedMsg:
+    'You denied storage access, no photos will be added.',
+  saveImageSucceed: 'Image saved',
+  eraserTitle: 'Eraser',
+};
+
+/**
+ * React Native Image Editor - Native photo editing bridge for iOS and Android.
+ *
+ * @example
+ * ```ts
+ * import { ImageEditor } from '@phucprime/react-native-image-editor';
+ *
+ * // Callback-based usage
+ * ImageEditor.open({
+ *   path: '/path/to/image.jpg',
+ *   onDone: (editedPath) => console.log('Edited:', editedPath),
+ *   onCancel: () => console.log('Cancelled'),
+ * });
+ *
+ * // Promise-based usage
+ * const editedPath = await ImageEditor.edit('/path/to/image.jpg', {
+ *   colors: ['#ff0000', '#00ff00', '#0000ff'],
+ * });
+ * ```
+ */
+class ImageEditor {
+  /**
+   * Open the image editor with callback-based API.
+   *
+   * @param config - Editor configuration options.
+   */
+  static open(config: ImageEditorConfig): void {
+    const {
+      stickers = [],
+      hiddenControls = [],
+      colors = DEFAULT_COLORS,
+      languages,
+      onDone,
+      onCancel,
+      ...rest
+    } = config;
+
+    const mergedLanguages = languages
+      ? { ...DEFAULT_LANGUAGES, ...languages }
+      : DEFAULT_LANGUAGES;
+
+    RNPhotoEditor.Edit(
+      {
+        colors,
+        hiddenControls,
+        stickers,
+        languages: mergedLanguages,
+        ...rest,
+      },
+      (imagePath: string) => {
+        onDone?.(imagePath);
+      },
+      (resultCode: number) => {
+        onCancel?.(resultCode);
+      },
+    );
+  }
+
+  /**
+   * Edit an image and return a promise with the edited image path.
+   *
+   * @param path - Path to the image file to edit.
+   * @param options - Optional editor configuration (excluding path, onDone, onCancel).
+   * @returns Promise that resolves with the edited image path, or rejects if cancelled.
+   */
+  static edit(
+    path: string,
+    options?: Omit<ImageEditorConfig, 'path' | 'onDone' | 'onCancel'>,
+  ): Promise<string> {
+    return new Promise((resolve, reject) => {
+      ImageEditor.open({
+        ...options,
+        path,
+        onDone: resolve,
+        onCancel: (resultCode) =>
+          reject(new Error(`Editor cancelled with code: ${resultCode}`)),
+      });
+    });
+  }
+
+  /**
+   * @deprecated Use `ImageEditor.open()` instead. This method is kept for backward compatibility.
+   */
+  static Edit(config: ImageEditorConfig): void {
+    ImageEditor.open(config);
+  }
+}
+
+/**
+ * @deprecated Use `ImageEditor` instead. `PhotoEditor` is an alias kept for backward compatibility.
+ */
+const PhotoEditor = ImageEditor;
+
+export { ImageEditor, PhotoEditor };
+export default ImageEditor;
+
+// Re-export legacy types for backward compatibility
+/** @deprecated Use `ImageEditorConfig` instead. */
+export type PhotoEditorProps = ImageEditorConfig;
+/** @deprecated Use `ImageEditorLanguage` instead. */
+export type Language = ImageEditorLanguage;