@codebymanan/react-native-photo-editor 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Abdul Manan
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/PhotoEditor.podspec

@@ -0,0 +1,23 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "PhotoEditor"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/codebymanan/react-native-photo-editor.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+  s.swift_version = "5.0"
+
+  s.dependency "ZLImageEditor", "~> 3.0"
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,200 @@
+# @codebymanan/react-native-photo-editor
+
+A React Native photo editor plugin wrapping native editors for Android and iOS.
+
+## Installation
+
+```sh
+npm install @codebymanan/react-native-photo-editor
+```
+
+## Usage
+
+```js
+import { open } from '@codebymanan/react-native-photo-editor';
+
+const editedPath = await open({
+  path: 'https://example.com/photo.jpg',
+  stickers: ['https://example.com/sticker.png'],
+});
+```
+
+`open()` resolves with the file path of the edited image, or rejects with
+`E_CANCELLED` if the user backs out.
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `path` | `string` | **Required.** Image to edit. Accepts a local file path, a `file://` or `content://` URI, or a remote `http(s)` URL. |
+| `stickers` | `string[]` | Sticker image URLs shown in the sticker picker. |
+| `language` | `string` | BCP-47 tag (`'fr'`, `'pt-BR'`, `'zh-Hans'`) for the editor UI. Defaults to the device language. See [Localization](#localization). |
+| `translations` | `Record<string, string>` | Per-key string overrides. See [Localization](#localization). |
+
+## Localization
+
+By default the editor follows the device language on both platforms. Pass
+`language` only when your app has its own language picker and the editor should
+follow that instead:
+
+```js
+await open({ path, language: 'fr' });
+```
+
+### iOS
+
+The iOS editor already ships 18 languages and follows the device locale with no
+setup. Nothing to configure.
+
+`language` maps onto those 18: Chinese (Simplified and Traditional), English,
+Japanese, French, German, Russian, Vietnamese, Korean, Malay, Italian,
+Indonesian, Portuguese, Spanish, Turkish, Arabic, Ukrainian and Dutch. A tag
+outside that set falls back to English rather than to the device language,
+since the caller has explicitly asked not to use the device setting.
+
+### Android
+
+The Android editor ships English only, but every user-facing string is a normal
+Android string resource, so **your app can translate it without forking this
+library**.
+
+Add a `values-<language>` folder to your own app and redefine the keys you care
+about. Android's resource merger gives your app priority over library
+resources, so your values win:
+
+```xml
+<!-- android/app/src/main/res/values-fr/strings.xml -->
+<resources>
+    <string name="pe_label_brush">Pinceau</string>
+    <string name="pe_label_save">Enregistrer</string>
+    <string name="pe_msg_saving">Enregistrement…</string>
+</resources>
+```
+
+That's the whole mechanism. Three things worth knowing:
+
+- **Override only what you need.** Keys you leave out fall back to this
+  library's English.
+- **Any language works**, including ones this library has never heard of. The
+  key names are the only contract.
+- **Match the qualifier.** Overriding a key in the default `values/` folder does
+  *not* win against a more specific match. Put French overrides in
+  `values-fr/`, German in `values-de/`, and so on.
+- **`language` selects the folder, it does not create one.** Passing
+  `language: 'fr'` makes the editor resolve strings against `values-fr/`; if
+  your app has no `values-fr/`, the editor stays in English. The example app
+  ships one to demonstrate this.
+
+### Supplying strings from JS
+
+`translations` overrides individual strings by key, for when your copy lives in
+JS rather than in native resources, or when you need a language iOS does not
+ship:
+
+```js
+await open({
+  path,
+  language: 'sv',
+  translations: {
+    pe_label_save: 'Spara',
+    pe_label_cancel: 'Avbryt',
+    pe_msg_saving: 'Sparar…',
+  },
+});
+```
+
+Keys you leave out keep their built-in value, and on Android a `values-<lang>`
+folder still applies underneath, so the two mechanisms stack: resources for the
+bulk, `translations` for whatever you want to override per call.
+
+**Android honours every key below. iOS honours nine of them** — the only strings
+the underlying editor exposes — and ignores the rest. That asymmetry is the
+reason to reach for a `values-<lang>` folder first on Android and treat
+`translations` as the cross-platform layer on top.
+
+#### String keys
+
+| Key | English | iOS |
+| --- | --- | --- |
+| `pe_app_name` | Photo Editor | |
+| `pe_label_brush` | Brush | |
+| `pe_label_shape` | Shape | |
+| `pe_label_oval` | Oval | |
+| `pe_label_rectangle` | Rectangle | |
+| `pe_label_line` | Line | |
+| `pe_label_arrow` | Arrow | |
+| `pe_label_emoji` | Emoji | |
+| `pe_label_sticker` | Sticker | |
+| `pe_label_eraser` | Eraser | |
+| `pe_label_eraser_mode` | Eraser Mode | |
+| `pe_label_text` | Text | |
+| `pe_label_filter` | Filter | |
+| `pe_label_adjust` | Adjust | |
+| `pe_label_opacity` | Opacity | |
+| `pe_label_undo` | Undo | ✓ |
+| `pe_label_redo` | Redo | |
+| `pe_label_close` | Close | | |
+| `pe_label_done` | Done | ✓ |
+| `pe_label_save` | Save | ✓ |
+| `pe_label_cancel` | Cancel | ✓ |
+| `pe_label_discard` | Discard | |
+| `pe_msg_save_image` | Do you want to exit without saving the image? | |
+| `pe_msg_saving` | Saving… | ✓ |
+| `pe_msg_save_failed` | Failed to save image | |
+| `pe_msg_drag_to_remove` | *(iOS only)* Drag here to remove | ✓ |
+| `pe_filter_none` | None | |
+| `pe_filter_auto_fix` | Auto Fix | |
+| `pe_filter_brightness` | Brightness | ✓ |
+| `pe_filter_contrast` | Contrast | ✓ |
+| `pe_filter_documentary` | Documentary | |
+| `pe_filter_duo_tone` | Duo Tone | |
+| `pe_filter_fill_light` | Fill Light | |
+| `pe_filter_fish_eye` | Fish Eye | |
+| `pe_filter_grain` | Grain | |
+| `pe_filter_gray_scale` | Grayscale | |
+| `pe_filter_lomish` | Lomish | |
+| `pe_filter_negative` | Negative | |
+| `pe_filter_posterize` | Posterize | |
+| `pe_filter_saturate` | Saturate | ✓ |
+| `pe_filter_sepia` | Sepia | |
+| `pe_filter_sharpen` | Sharpen | |
+| `pe_filter_temperature` | Temperature | |
+| `pe_filter_tint` | Tint | |
+| `pe_filter_vignette` | Vignette | |
+| `pe_filter_cross_process` | Cross Process | |
+| `pe_filter_black_white` | Black & White | |
+| `pe_filter_flip_horizontal` | Flip Horizontal | |
+| `pe_filter_flip_vertical` | Flip Vertical | |
+| `pe_filter_rotate` | Rotate | |
+
+### Right-to-left languages
+
+**Android** mirrors the editor for an RTL tag such as `language: 'ar'`, but only
+if your app has opted into RTL at all:
+
+```xml
+<!-- android/app/src/main/AndroidManifest.xml -->
+<application android:supportsRtl="true">
+```
+
+Without that flag Android pins the whole app to left-to-right and the editor
+cannot override it. The editor's own layouts use `start`/`end` throughout and
+the undo and redo arrows are `autoMirrored`, so nothing else is needed.
+
+**iOS** translates but does not mirror. `language` selects the editor's string
+bundle; UIKit takes layout direction from the app's own localizations, and the
+underlying editor never sets `semanticContentAttribute`. So the iOS editor lays
+out right-to-left when your app itself is running in an RTL language, and not
+because of this option.
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,65 @@
+buildscript {
+  ext.PhotoEditor = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return PhotoEditor[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.photoeditor"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+
+  // Editing engine
+  implementation "com.burhanrashid52:photoeditor:3.0.2"
+
+  // Editor screen UI
+  implementation "androidx.appcompat:appcompat:1.7.0"
+  implementation "androidx.constraintlayout:constraintlayout:2.1.4"
+  implementation "androidx.core:core-ktx:1.13.1"
+  implementation "androidx.fragment:fragment-ktx:1.8.1"
+  implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.8.3"
+  implementation "androidx.cardview:cardview:1.0.0"
+  implementation "com.google.android.material:material:1.12.0"
+  implementation "com.github.bumptech.glide:glide:4.16.0"
+  implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.8.1"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,14 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <!-- Needed to load remote images and stickers into the editor -->
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application>
+        <activity
+            android:name="com.photoeditor.editor.EditImageActivity"
+            android:exported="false"
+            android:screenOrientation="portrait"
+            android:theme="@style/PhotoEditorTheme.NoActionBar" />
+    </application>
+
+</manifest>

package/android/src/main/java/com/photoeditor/PhotoEditorModule.kt

@@ -0,0 +1,130 @@
+package com.photoeditor
+
+import android.app.Activity
+import android.content.Intent
+import android.os.Bundle
+import com.facebook.react.bridge.BaseActivityEventListener
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.ReadableType
+import com.photoeditor.editor.EditImageActivity
+import com.photoeditor.editor.EditorLocale
+
+class PhotoEditorModule(reactContext: ReactApplicationContext) :
+  NativePhotoEditorSpec(reactContext) {
+
+  private var pendingPromise: Promise? = null
+
+  private val activityEventListener = object : BaseActivityEventListener() {
+    override fun onActivityResult(
+      activity: Activity,
+      requestCode: Int,
+      resultCode: Int,
+      data: Intent?,
+    ) {
+      if (requestCode != EDITOR_REQUEST_CODE) return
+      val promise = pendingPromise ?: return
+      pendingPromise = null
+
+      when (resultCode) {
+        Activity.RESULT_OK -> {
+          val path = data?.getStringExtra(EditImageActivity.RESULT_EXTRA_PATH)
+          if (path.isNullOrBlank()) {
+            promise.reject(E_FAILED, "Editor returned no image path")
+          } else {
+            promise.resolve(path)
+          }
+        }
+
+        Activity.RESULT_CANCELED ->
+          promise.reject(E_CANCELLED, "User cancelled image editing")
+
+        EditImageActivity.RESULT_ERROR -> {
+          val message = data?.getStringExtra(EditImageActivity.RESULT_EXTRA_ERROR)
+          promise.reject(E_FAILED, message ?: "Photo editor failed")
+        }
+
+        else -> promise.reject(E_FAILED, "Photo editor failed")
+      }
+    }
+  }
+
+  init {
+    reactContext.addActivityEventListener(activityEventListener)
+  }
+
+  override fun open(options: ReadableMap, promise: Promise) {
+    val activity = currentActivity
+    if (activity == null) {
+      promise.reject(E_NO_ACTIVITY, "No activity attached to React context")
+      return
+    }
+    if (pendingPromise != null) {
+      promise.reject(E_IN_PROGRESS, "Another editor session is already open")
+      return
+    }
+
+    val path = options.getString("path")
+    if (path.isNullOrBlank()) {
+      promise.reject(E_INVALID_OPTIONS, "Missing required option: path")
+      return
+    }
+
+    val stickers = ArrayList<String>()
+    options.getArray("stickers")?.let { array ->
+      for (i in 0 until array.size()) {
+        array.getString(i)?.let(stickers::add)
+      }
+    }
+
+    pendingPromise = promise
+
+    // Assigned unconditionally so a call without a language clears the tag left
+    // behind by an earlier one. The activity reads it from attachBaseContext(),
+    // which runs before getIntent() is usable.
+    val language = options.getString("language")?.takeIf { it.isNotBlank() }
+    EditorLocale.pendingTag = language
+
+    val intent = Intent(activity, EditImageActivity::class.java)
+      .putExtra(EditImageActivity.EXTRA_IMAGE_PATH, path)
+      .putExtra(EditImageActivity.EXTRA_LANGUAGE, language)
+      .putExtra(EditImageActivity.EXTRA_TRANSLATIONS, translationsBundle(options))
+      .putStringArrayListExtra(EditImageActivity.EXTRA_STICKERS, stickers)
+    activity.startActivityForResult(intent, EDITOR_REQUEST_CODE)
+  }
+
+  /**
+   * Flattens the `translations` option into a Bundle. Non-string values are
+   * dropped rather than coerced, so a mistyped entry falls back to the built-in
+   * string instead of rendering something like "true".
+   */
+  private fun translationsBundle(options: ReadableMap): Bundle? {
+    val translations = options.getMap("translations") ?: return null
+    val bundle = Bundle()
+    val iterator = translations.keySetIterator()
+    while (iterator.hasNextKey()) {
+      val key = iterator.nextKey()
+      if (translations.getType(key) != ReadableType.String) continue
+      translations.getString(key)?.let { bundle.putString(key, it) }
+    }
+    return if (bundle.isEmpty) null else bundle
+  }
+
+  override fun invalidate() {
+    reactApplicationContext.removeActivityEventListener(activityEventListener)
+    super.invalidate()
+  }
+
+  companion object {
+    const val NAME = NativePhotoEditorSpec.NAME
+
+    private const val EDITOR_REQUEST_CODE = 4521
+
+    private const val E_NO_ACTIVITY = "E_NO_ACTIVITY"
+    private const val E_IN_PROGRESS = "E_IN_PROGRESS"
+    private const val E_INVALID_OPTIONS = "E_INVALID_OPTIONS"
+    private const val E_CANCELLED = "E_CANCELLED"
+    private const val E_FAILED = "E_FAILED"
+  }
+}

package/android/src/main/java/com/photoeditor/PhotoEditorPackage.kt

@@ -0,0 +1,31 @@
+package com.photoeditor
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import java.util.HashMap
+
+class PhotoEditorPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == PhotoEditorModule.NAME) {
+      PhotoEditorModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
+    mapOf(
+      PhotoEditorModule.NAME to ReactModuleInfo(
+        name = PhotoEditorModule.NAME,
+        className = PhotoEditorModule.NAME,
+        canOverrideExistingModule = false,
+        needsEagerInit = false,
+        isCxxModule = false,
+        isTurboModule = true
+      )
+    )
+  }
+}

package/android/src/main/java/com/photoeditor/editor/ColorPickerAdapter.kt

@@ -0,0 +1,100 @@
+package com.photoeditor.editor
+
+import com.photoeditor.R
+
+import android.content.Context
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.recyclerview.widget.RecyclerView
+import androidx.core.content.ContextCompat
+import java.util.ArrayList
+
+/**
+ * Created by Ahmed Adel on 5/8/17.
+ */
+class ColorPickerAdapter internal constructor(
+    private var context: Context,
+    colorPickerColors: List<Int>
+) : RecyclerView.Adapter<ColorPickerAdapter.ViewHolder>() {
+    private var inflater: LayoutInflater
+    private val colorPickerColors: List<Int>
+    private lateinit var onColorPickerClickListener: OnColorPickerClickListener
+
+    internal constructor(context: Context) : this(context, getDefaultColors(context)) {
+        this.context = context
+        inflater = LayoutInflater.from(context)
+    }
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
+        val view = inflater.inflate(R.layout.pe_color_picker_item_list, parent, false)
+        return ViewHolder(view)
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        holder.colorPickerView.setBackgroundColor(colorPickerColors[position])
+    }
+
+    override fun getItemCount(): Int {
+        return colorPickerColors.size
+    }
+
+    fun setOnColorPickerClickListener(onColorPickerClickListener: OnColorPickerClickListener) {
+        this.onColorPickerClickListener = onColorPickerClickListener
+    }
+
+    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
+        var colorPickerView: View = itemView.findViewById(R.id.color_picker_view)
+
+        init {
+            itemView.setOnClickListener {
+                onColorPickerClickListener.onColorPickerClickListener(
+                    colorPickerColors[adapterPosition]
+                )
+            }
+        }
+    }
+
+    interface OnColorPickerClickListener {
+        fun onColorPickerClickListener(colorCode: Int)
+    }
+
+    companion object {
+        fun getDefaultColors(context: Context): List<Int> {
+            val colorPickerColors = ArrayList<Int>()
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_blue_color_picker))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_brown_color_picker))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_green_color_picker))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_orange_color_picker))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_red_color_picker))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_black))
+            colorPickerColors.add(
+                ContextCompat.getColor(
+                    (context),
+                    R.color.pe_red_orange_color_picker
+                )
+            )
+            colorPickerColors.add(
+                ContextCompat.getColor(
+                    (context),
+                    R.color.pe_sky_blue_color_picker
+                )
+            )
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_violet_color_picker))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_white))
+            colorPickerColors.add(ContextCompat.getColor((context), R.color.pe_yellow_color_picker))
+            colorPickerColors.add(
+                ContextCompat.getColor(
+                    (context),
+                    R.color.pe_yellow_green_color_picker
+                )
+            )
+            return colorPickerColors
+        }
+    }
+
+    init {
+        inflater = LayoutInflater.from(context)
+        this.colorPickerColors = colorPickerColors
+    }
+}