@codebymanan/react-native-photo-editor 0.1.0

package/ios/PhotoEditor.h

@@ -0,0 +1,5 @@
+#import <PhotoEditorSpec/PhotoEditorSpec.h>
+
+@interface PhotoEditor : NSObject <NativePhotoEditorSpec>
+
+@end

package/ios/PhotoEditor.mm

@@ -0,0 +1,58 @@
+#import "PhotoEditor.h"
+
+#if __has_include("PhotoEditor/PhotoEditor-Swift.h")
+#import "PhotoEditor/PhotoEditor-Swift.h"
+#else
+#import "PhotoEditor-Swift.h"
+#endif
+
+@implementation PhotoEditor
+
+- (void)open:(JS::NativePhotoEditor::SpecOpenOptions &)options
+     resolve:(RCTPromiseResolveBlock)resolve
+      reject:(RCTPromiseRejectBlock)reject
+{
+    NSString *path = options.path();
+    if (path.length == 0) {
+        reject(@"E_INVALID_OPTIONS", @"Missing required option: path", nil);
+        return;
+    }
+
+    NSMutableArray<NSString *> *stickers = [NSMutableArray new];
+    if (options.stickers().has_value()) {
+        auto vector = options.stickers().value();
+        for (size_t i = 0; i < vector.size(); i++) {
+            [stickers addObject:vector[i]];
+        }
+    }
+
+    // Codegen hands dictionaries back untyped, so check before casting.
+    id rawTranslations = options.translations();
+    NSDictionary *translations = [rawTranslations isKindOfClass:[NSDictionary class]]
+        ? (NSDictionary *)rawTranslations
+        : nil;
+
+    [PhotoEditorManager open:path
+                    stickers:stickers
+                    language:options.language()
+                translations:translations
+                     resolve:^(NSString *outputPath) {
+                         resolve(outputPath);
+                     }
+                      reject:^(NSString *code, NSString *message) {
+                          reject(code, message, nil);
+                      }];
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+    return std::make_shared<facebook::react::NativePhotoEditorSpecJSI>(params);
+}
+
++ (NSString *)moduleName
+{
+  return @"PhotoEditor";
+}
+
+@end

package/ios/PhotoEditorManager.swift

@@ -0,0 +1,164 @@
+import UIKit
+import ZLImageEditor
+
+@objc(PhotoEditorManager)
+public class PhotoEditorManager: NSObject {
+
+  @objc public static func open(
+    _ path: String,
+    stickers: [String],
+    language: String?,
+    translations: [String: Any]?,
+    resolve: @escaping (String) -> Void,
+    reject: @escaping (String, String) -> Void
+  ) {
+    loadImage(path) { image in
+      DispatchQueue.main.async {
+        guard let image else {
+          reject("E_FAILED", "Could not load image: \(path)")
+          return
+        }
+        guard let presenter = topViewController() else {
+          reject("E_NO_ACTIVITY", "No view controller available to present the editor")
+          return
+        }
+
+        ZLImageEditorUIConfiguration.default()
+          .languageType(languageType(for: language))
+          .customLanguageConfig(customLanguage(from: translations))
+
+        ZLImageEditorConfiguration.default()
+          .editImageTools([.draw, .clip, .textSticker, .mosaic, .filter, .adjust])
+          .adjustTools([.brightness, .contrast, .saturation])
+
+        let editor = ZLEditImageViewController(image: image)
+        editor.modalPresentationStyle = .fullScreen
+        editor.editFinishBlock = { resImage, _ in
+          saveImage(resImage, resolve: resolve, reject: reject)
+        }
+        editor.cancelBlock = {
+          reject("E_CANCELLED", "User cancelled image editing")
+        }
+        presenter.present(editor, animated: true)
+      }
+    }
+  }
+
+  /// The editor exposes exactly these nine strings for overriding, so this is
+  /// the whole of what `translations` can reach on iOS. Keys are the same ones
+  /// Android uses, which is what lets one map drive both platforms.
+  private static let overridableKeys: [String: ZLLocalLanguageKey] = [
+    "pe_label_cancel": .cancel,
+    "pe_label_done": .done,
+    "pe_label_save": .editFinish,
+    "pe_label_undo": .revert,
+    "pe_filter_brightness": .brightness,
+    "pe_filter_contrast": .contrast,
+    "pe_filter_saturate": .saturation,
+    "pe_msg_drag_to_remove": .textStickerRemoveTips,
+    "pe_msg_saving": .hudProcessing,
+  ]
+
+  /// Always returns a dictionary, empty included: the configuration is a shared
+  /// singleton, so anything left unassigned would outlive the call that set it.
+  private static func customLanguage(from translations: [String: Any]?) -> [ZLLocalLanguageKey: String] {
+    guard let translations else { return [:] }
+
+    return overridableKeys.reduce(into: [:]) { config, entry in
+      // Non-string values are dropped rather than coerced, so a mistyped entry
+      // falls back to the built-in string.
+      if let value = translations[entry.key] as? String, !value.isEmpty {
+        config[entry.value] = value
+      }
+    }
+  }
+
+  /// Maps a BCP-47 tag onto the languages the editor ships.
+  ///
+  /// A missing tag means "follow the device". An unrecognised tag falls back to
+  /// English rather than to the device language: the caller explicitly asked not
+  /// to use the device setting, so quietly reverting to it would be the one
+  /// answer we know they did not want.
+  private static func languageType(for tag: String?) -> ZLImageEditorLanguageType {
+    guard let tag = tag?.lowercased(), !tag.isEmpty else { return .system }
+
+    // Tolerate the Java-style "pt_BR" spelling as well as BCP-47's "pt-BR".
+    let subtags = tag.split(whereSeparator: { $0 == "-" || $0 == "_" }).map(String.init)
+
+    // Chinese needs the script or region, not just the language, to pick a bundle.
+    if subtags.first == "zh" {
+      let traditional = subtags.dropFirst().contains { ["hant", "tw", "hk", "mo"].contains($0) }
+      return traditional ? .chineseTraditional : .chineseSimplified
+    }
+
+    switch subtags.first ?? tag {
+    case "en": return .english
+    case "ja": return .japanese
+    case "fr": return .french
+    case "de": return .german
+    case "ru": return .russian
+    case "vi": return .vietnamese
+    case "ko": return .korean
+    case "ms": return .malay
+    case "it": return .italian
+    case "id", "in": return .indonesian
+    case "pt": return .portuguese
+    case "es": return .spanish
+    case "tr": return .turkish
+    case "ar": return .arabic
+    case "uk": return .ukrainian
+    case "nl": return .dutch
+    default: return .english
+    }
+  }
+
+  private static func loadImage(_ path: String, completion: @escaping (UIImage?) -> Void) {
+    if path.hasPrefix("http://") || path.hasPrefix("https://") {
+      guard let url = URL(string: path) else {
+        completion(nil)
+        return
+      }
+      URLSession.shared.dataTask(with: url) { data, _, _ in
+        completion(data.flatMap(UIImage.init(data:)))
+      }.resume()
+    } else {
+      let filePath = path.hasPrefix("file://") ? String(path.dropFirst(7)) : path
+      completion(UIImage(contentsOfFile: filePath))
+    }
+  }
+
+  private static func saveImage(
+    _ image: UIImage,
+    resolve: @escaping (String) -> Void,
+    reject: @escaping (String, String) -> Void
+  ) {
+    let outputDir = (NSTemporaryDirectory() as NSString).appendingPathComponent("photo_editor")
+    do {
+      try FileManager.default.createDirectory(
+        atPath: outputDir, withIntermediateDirectories: true)
+      let outputPath = (outputDir as NSString)
+        .appendingPathComponent("\(Int(Date().timeIntervalSince1970 * 1000)).png")
+      guard let data = image.pngData() else {
+        reject("E_FAILED", "Could not encode edited image")
+        return
+      }
+      try data.write(to: URL(fileURLWithPath: outputPath))
+      resolve(outputPath)
+    } catch {
+      reject("E_FAILED", "Failed to save image: \(error.localizedDescription)")
+    }
+  }
+
+  private static func topViewController() -> UIViewController? {
+    let keyWindow = UIApplication.shared.connectedScenes
+      .compactMap { $0 as? UIWindowScene }
+      .flatMap { $0.windows }
+      .first { $0.isKeyWindow }
+
+    var top = keyWindow?.rootViewController
+    while let presented = top?.presentedViewController {
+      top = presented
+    }
+    return top
+  }
+}

package/lib/module/NativePhotoEditor.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.getEnforcing('PhotoEditor');
+//# sourceMappingURL=NativePhotoEditor.js.map

package/lib/module/NativePhotoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["NativePhotoEditor.ts"],"mappings":";;AAAA,SAASA,mBAAmB,QAA0B,cAAc;AAWpE,eAAeA,mBAAmB,CAACC,YAAY,CAAO,aAAa,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { open } from './open';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["open"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,QAAQ","ignoreList":[]}

package/lib/module/open.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export function open(_options) {
+  throw new Error("'@codebymanan/react-native-photo-editor' is only supported on native platforms.");
+}
+//# sourceMappingURL=open.js.map

package/lib/module/open.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["open","_options","Error"],"sourceRoot":"../../src","sources":["open.tsx"],"mappings":";;AAEA,OAAO,SAASA,IAAIA,CAACC,QAA4B,EAAmB;EAClE,MAAM,IAAIC,KAAK,CACb,iFACF,CAAC;AACH","ignoreList":[]}

package/lib/module/open.native.js

@@ -0,0 +1,7 @@
+"use strict";
+
+import PhotoEditor from "./NativePhotoEditor.js";
+export function open(options) {
+  return PhotoEditor.open(options);
+}
+//# sourceMappingURL=open.native.js.map

package/lib/module/open.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PhotoEditor","open","options"],"sourceRoot":"../../src","sources":["open.native.tsx"],"mappings":";;AAAA,OAAOA,WAAW,MAAM,wBAAqB;AAG7C,OAAO,SAASC,IAAIA,CAACC,OAA2B,EAAmB;EACjE,OAAOF,WAAW,CAACC,IAAI,CAACC,OAAO,CAAC;AAClC","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/NativePhotoEditor.d.ts

@@ -0,0 +1,14 @@
+import { type TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+    open(options: {
+        path: string;
+        stickers?: string[];
+        language?: string;
+        translations?: {
+            [key: string]: string;
+        };
+    }): Promise<string>;
+}
+declare const _default: Spec;
+export default _default;
+//# sourceMappingURL=NativePhotoEditor.d.ts.map

package/lib/typescript/src/NativePhotoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativePhotoEditor.d.ts","sourceRoot":"","sources":["../../../src/NativePhotoEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAErE,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,IAAI,CAAC,OAAO,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,YAAY,CAAC,EAAE;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE,CAAC;KAC1C,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;CACrB;;AAED,wBAAqE"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,3 @@
+export { open } from './open';
+export type { PhotoEditorOptions } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,kBAAkB,EAAE,MAAM,YAAS,CAAC"}

package/lib/typescript/src/open.d.ts

@@ -0,0 +1,3 @@
+import type { PhotoEditorOptions } from './types.js';
+export declare function open(_options: PhotoEditorOptions): Promise<string>;
+//# sourceMappingURL=open.d.ts.map

package/lib/typescript/src/open.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"open.d.ts","sourceRoot":"","sources":["../../../src/open.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAS,CAAC;AAElD,wBAAgB,IAAI,CAAC,QAAQ,EAAE,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,CAIlE"}

package/lib/typescript/src/open.native.d.ts

@@ -0,0 +1,3 @@
+import type { PhotoEditorOptions } from './types.js';
+export declare function open(options: PhotoEditorOptions): Promise<string>;
+//# sourceMappingURL=open.native.d.ts.map

package/lib/typescript/src/open.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"open.native.d.ts","sourceRoot":"","sources":["../../../src/open.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAS,CAAC;AAElD,wBAAgB,IAAI,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,MAAM,CAAC,CAEjE"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,39 @@
+export interface PhotoEditorOptions {
+    /**
+     * The image to edit. Accepts a local file path, `file://` or `content://`
+     * URI, or a remote `http(s)` URL.
+     */
+    path: string;
+    /**
+     * Optional list of sticker image URLs shown in the sticker picker.
+     */
+    stickers?: string[];
+    /**
+     * BCP-47 language tag (`'fr'`, `'pt-BR'`, `'zh-Hans'`) for the editor UI.
+     *
+     * Defaults to the device language. Set this only when your app has its own
+     * language picker and needs the editor to follow it rather than the device.
+     *
+     * On Android the tag selects a `values-<lang>` resource folder, so it can be
+     * any language your app provides strings for. On iOS it maps onto the
+     * languages the underlying editor ships; unsupported tags fall back to
+     * English.
+     */
+    language?: string;
+    /**
+     * Per-key string overrides, keyed by the editor's string names
+     * (`pe_label_save`, `pe_filter_contrast`, ...). See the README for the list.
+     *
+     * Use this when your strings live in JS rather than in native resources, or
+     * to reach a language iOS does not ship. Keys you leave out keep their
+     * built-in value, and on Android anything you have already put in a
+     * `values-<lang>` folder still applies underneath.
+     *
+     * Android honours every key. iOS honours the nine the underlying editor
+     * exposes; the rest are ignored there.
+     */
+    translations?: {
+        [key: string]: string;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CAC1C"}

package/package.json

@@ -0,0 +1,128 @@
+{
+  "name": "@codebymanan/react-native-photo-editor",
+  "version": "0.1.0",
+  "description": "A React Native photo editor plugin wrapping native editors for Android and iOS",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-photo-editor-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-photo-editor-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codebymanan/react-native-photo-editor.git"
+  },
+  "author": "Abdul Manan <abdulmanancoder@gmail.com> (https://github.com/codebymanan)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/codebymanan/react-native-photo-editor/issues"
+  },
+  "homepage": "https://github.com/codebymanan/react-native-photo-editor#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.43.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "PhotoEditorSpec",
+    "type": "modules",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.photoeditor"
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "create-react-native-library": {
+    "type": "turbo-module",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint"
+    ],
+    "version": "0.63.0"
+  }
+}

package/src/NativePhotoEditor.ts

@@ -0,0 +1,12 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  open(options: {
+    path: string;
+    stickers?: string[];
+    language?: string;
+    translations?: { [key: string]: string };
+  }): Promise<string>;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('PhotoEditor');

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { open } from './open';
+export type { PhotoEditorOptions } from './types';

package/src/open.native.tsx

@@ -0,0 +1,6 @@
+import PhotoEditor from './NativePhotoEditor';
+import type { PhotoEditorOptions } from './types';
+
+export function open(options: PhotoEditorOptions): Promise<string> {
+  return PhotoEditor.open(options);
+}

package/src/open.tsx

@@ -0,0 +1,7 @@
+import type { PhotoEditorOptions } from './types';
+
+export function open(_options: PhotoEditorOptions): Promise<string> {
+  throw new Error(
+    "'@codebymanan/react-native-photo-editor' is only supported on native platforms."
+  );
+}

package/src/types.ts

@@ -0,0 +1,36 @@
+export interface PhotoEditorOptions {
+  /**
+   * The image to edit. Accepts a local file path, `file://` or `content://`
+   * URI, or a remote `http(s)` URL.
+   */
+  path: string;
+  /**
+   * Optional list of sticker image URLs shown in the sticker picker.
+   */
+  stickers?: string[];
+  /**
+   * BCP-47 language tag (`'fr'`, `'pt-BR'`, `'zh-Hans'`) for the editor UI.
+   *
+   * Defaults to the device language. Set this only when your app has its own
+   * language picker and needs the editor to follow it rather than the device.
+   *
+   * On Android the tag selects a `values-<lang>` resource folder, so it can be
+   * any language your app provides strings for. On iOS it maps onto the
+   * languages the underlying editor ships; unsupported tags fall back to
+   * English.
+   */
+  language?: string;
+  /**
+   * Per-key string overrides, keyed by the editor's string names
+   * (`pe_label_save`, `pe_filter_contrast`, ...). See the README for the list.
+   *
+   * Use this when your strings live in JS rather than in native resources, or
+   * to reach a language iOS does not ship. Keys you leave out keep their
+   * built-in value, and on Android anything you have already put in a
+   * `values-<lang>` folder still applies underneath.
+   *
+   * Android honours every key. iOS honours the nine the underlying editor
+   * exposes; the rest are ignored there.
+   */
+  translations?: { [key: string]: string };
+}