baronha / react-native-photo-editor

🌄 Photo editor using native modules for iOS and Android. Inherit from 2 available libraries, ZLImageEditor (iOS) and PhotoEditor (Android)

Hi 👋, I'm Bảo Hà

A passionate frontend developer from VietNam

• ⚡️ Portfolio: https://baoha.vercel.app

• 🔭 I’m currently working on ABC Technology JSC.

• 💬 Ask me about React Native, NextJS

• 📫 How to reach me [email protected]

react-native-photo-editor's Issues

Load image failed

I am attempting to make it so that react-native-crop-picker passes into the photo editor; however, it is failing. I verified that the path from the crop picker is valid by putting it in an Image component.

Here is the error:
[Error: Load image failed: /private/var/mobile/Containers/Data/Application/100886D7-BA63-4F9C-AE14-5CB00CB60E73/tmp/react-native-image-crop-picker/73334332-A74B-4D15-AFEA-CFB07A702D4A.jpg]

Why isn't react-native-photo-editor able to access an image in this path?

Is it possible to change language of photo editor?

Is there any option I could change the language? Even If I change the text manually, it would be great

Problem facing in installation

I'm getting this error while I run the command pod install in iOS folder

[!] CocoaPods could not find compatible versions for pod "react-native-photo-editor":
In Podfile:
react-native-photo-editor (from ../node_modules/@baronha/react-native-photo-editor)

Specs satisfying the react-native-photo-editor (from ../node_modules/@baronha/react-native-photo-editor) dependency were found, but they required a higher minimum deployment target.

please help me

react-native version latest
platform :ios, '11.0'

Execution failed for task ':baronha_react-native-photo-editor:compileDebugKotlin'.

Android build is failing.

1: Task failed with an exception.

• What went wrong:
  Execution failed for task ':baronha_react-native-photo-editor:compileDebugKotlin'.

Compilation error. See log for more details

rotation is not supported on IOS

Can you update on IOS with undo and redo like on Android

Hi,
Thanks for your great works.
Can you update on IOS with undo and redo like on Android.

(

why photo editor is opening for some images only in ios ?

Pinch to zoom does not work in Android, but works in iOS

Hi, does anyone encounter similar issue where pinch to zoom not working in Android but works in iOS?
React Native version: 0.69.3

Thanks.

PhotoEditor.open() doesn't open editor on iOS but works on Android

I'm having an issue with the PhotoEditor.open() function: The function works perfectly fine on Android, but when running the same code on iOS, the function call terminates without any error messages and the editor does not open.

The image picker function (launchImageLibrary) is working correctly and providing a valid file URI on both platforms.
On Android, the image editor opens as expected after the image is selected.
On iOS, after selecting an image, the PhotoEditor.open() function gets called, but the editor doesn't open. There are no error messages or exceptions thrown, the function just terminates.

Code Sample:

const content = await launchImageLibrary({
    mediaType: "mixed",
    durationLimit: 15,
});

const path = content.assets[0].uri;

const Options = { path: path, stickers: [] };
const edited_path = await PhotoEditor.open(Options);

showing only one filter(normal) for IOS 15

Task :baronha_react-native-photo-editor:compileDebugKotlin FAILED

[stderr] Attribute application@allowBackup value=(true) from AndroidManifest.xml:16:162-188
[stderr] is also present at [:baronha_react-native-photo-editor] AndroidManifest.xml:14:9-36 value=(false).
[stderr] Suggestion: add 'tools:replace="android:allowBackup"' to element at AndroidManifest.xml:6:5-117 to override.

Task :expo-dev-client:compileDebugJavaWithJavac
Task :baronha_react-native-photo-editor:compileDebugKotlin FAILED

I've gotten the android build to build successfully before with this package INCLUDED in the package.json. However the build crashes on start up with the package installed. I recently updated to expo 47 recently and after that I can't get a successful build on android even with adding the tools:replace.... suggestion.
How do you fix this for android? The application builds fine for iOS with eas but fails for android.
Is this just not EXPO/EAS compatible for android?

Any help would be great, thanks in advance.

Change Button Text

Can I change the language of the buttons? for example the "Shape" for another word in another language?

What should the path to the local file look like?

Hi, what should the path to the local file look like? It just works with web URL. I've tried:

const result = await PhotoEditor.open({ path: './assets/logo.png' });

and

const result = await PhotoEditor.open({ path: require('./assets/logo.png') });

and it doesn't work.

Background color change

on ios:
how can I disable white background on any change,
I want to have transparent background but on everychange library changes the background to white color,

Thanks for the support in advance,

Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.1.15

Hi, I got error on invalid Kotlin version when running react-native run-android

React Native version: 0.69.3

e: /Users/wilson/work/carlink/CarlinkApp/node_modules/@baronha/react-native-photo-editor/android/src/main/java/com/reactnativephotoeditor/activity/PhotoEditorActivity.kt: (105, 5): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.6.0, expected version is 1.1.15.

stickers issue

When adding stickers using the Sticker tool, stickers can be added outside of image frames (from the upside) (android)

The menu is not shown in iOS

When i implemented this lib in ios. I have issue like the photo which is menu can't show fully. If there is any solution?

Execution failed for task ':carexcn-react-native-photo-editor:compileDebugKotlin'.

I just run "npm i @baronha/react-native-photo-editor" && "npx react-native run-android ". Then it execution failed.

The error message is :

        FAILURE: Build failed with an exception.
        
        * What went wrong:
        Execution failed for task ':@baronha/react-native-photo-editor:compileDebugKotlin'.
        > Compilation error. See log for more details
        
        * Try:
        Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
        
        * Get more help at https://help.gradle.org

Could you help to fix it?

App is crashing on calling const result = await PhotoEditor.open(Options);

App is crashing on calling const result = await PhotoEditor.open(Options); But no errors are showing.

Example project - Unable to resolve @babel/runtime (iOS)

Tried to build and run project in example folder, but stucks after run:
Unable to resolve module @babel/runtime/helpers/interopRequireDefault

Even when i cleaned cache or reinstalled node_modules.

Environment:
Platform - iOS
XCode - Version 13.1
React Native - 0.64.2
npm - 8.1.4

Add border outside transparent image edges? Or a dark background?

When typing text over a transparent image, I don't see the edges of the image, so after moving and saving, the text is cut sometimes.

Is it possible to add a border around the image itself? Or a darker background (around the transparent image, that doesn't show in the image's background itself)?

can't launch image editor in IOS

I can't launch image editor in IOS simulator.
I had add pod in Podfile and run pod install.
But when I call ImageEditor.open, The program will get stuck there and the .then will not be called
My react native version: 0.71.0

Upgrade using turbo modules

Hi, are there any plans to update this library to the react native new architecture?

bursh Opacity not work

I use this photo editor but the opacity slider changes. And the opacity doesn't change.

Type of expression is ambiguous without more context

I'm using Apple Swift version 5.3.2 (swiftlang-1200.0.45 clang-1200.0.32.28)
Target: x86_64-apple-darwin19.6.0.

Could you please help me out, here?

iOS Library Suggestion

Hi,
Instead of Brightroom ios library you can use the below mentioned library.
https://github.com/longitachi/ZLImageEditor
This library has a matching modules respective to the Android Native library.

Can you add the crop feature for Android as well?

Hello,

Thank you for your great work!

We would like to know whether you can add crop feature for Android as well

Thanks

REACT-NATIVE INSTALLATION

im new to react native i dont know how to install this library on android kindly guide me i can buy you a coffee

Feature request: Expo Config Plugin

It would be awesome if this library could ship an expo-config-plugin for EXPO SDK.

Update of native libraries

Hi! Soon i will try to update native libraries, cuz they both have new versions. And will send PR @baronha

please update sdwebimage version atleast to 5.13.4

Hi, I notice the crash issue of SDWebImage below version 5.13.4 as you can see here
SDWebImage/SDWebImage#3273

So could you please update SDWebImage version? Thanks so much

Auto close app when click to image editor (Android)

with all version - react-native 0.63

Android crashing after edit and hit save button

Fatal Exception: java.lang.RuntimeException
An error occurred while executing doInBackground()
android.os.AsyncTask$4.done (AsyncTask.java:399)

java.lang.Thread.run (Thread.java:919)

Caused by java.lang.IndexOutOfBoundsException
Index: 1, Size: 0
java.util.ArrayList.get (ArrayList.java:437)

android.view.View.draw (View.java:23185)
ja.burhanrashid52.photoeditor.PhotoSaverTask.captureView (PhotoSaverTask.java:161)
ja.burhanrashid52.photoeditor.PhotoSaverTask.buildBitmap (PhotoSaverTask.java:104)
ja.burhanrashid52.photoeditor.PhotoSaverTask.saveImageInFile (PhotoSaverTask.java:88)
ja.burhanrashid52.photoeditor.PhotoSaverTask.doInBackground (PhotoSaverTask.java:70)
ja.burhanrashid52.photoeditor.PhotoSaverTask.doInBackground (PhotoSaverTask.java:23)

I see same issue in native library too => burhanrashid52/PhotoEditor#374
Can you look into this please @baronha

customize font

how can i customize font size, font style, fontFamily

Showing All Errors Only Undefined symbol: (extension in Accelerate):__C.vImage_Buffer.free() -> ()

Hi,
I am using this plugin for react native app which is used for editing image in both android and ios. It is working fine for android but for ios it is giving this error
Showing All Errors Only
Undefined symbol: (extension in Accelerate):__C.vImage_Buffer.free() -> ()
$defer #1 () -> () in (extension in react_native_photo_editor):__C.UIImage.resize_vI(__C.CGSize) -> __C.UIImage? in libreact-native-photo-editor.a(UIImage+ZLImageEditor.o)
ld: symbol(s) not found for architecture x86_64

I have done the setup mentioned in the doc.

Hide Button

This is a great library. 👍
But i need hide some button(ex: sticker,... ) non-use.
How i can do that?

Thank for reply! 😄

Issue compiling on xcode 12.4

I seems that the ZLImage editor lib causes a swift compile error here:
https://github.com/baronha/react-native-photo-editor/blob/master/ios/ZLImageEditor/Sources/General/ZLEditImageViewController.swift#L289

I am seeing the error "Type of expression is ambiguous without more context"

Task :baronha_react-native-photo-editor:compileDebugKotlin FAILED

update the example with newer version of react native

main getting problem for android, when open the edit the whole app will be closed.
would like to check the android setup with details, thanks

I am using
"react": "18.2.0",
"react-native": "^0.71.11",

Making edits

Is there a way to store/load an edited format to make changes to the image later?

How to resize Sticker and Text

After adding Sticker and Text but I can not resize it, do you know how to resize it, Thank you so much.

Error when building or after installing the library: Task :@baronha_react-native-photo-editor:compileReleaseKotlin FAILED

As soon as I run yarn run android the library breaks, and it doesn't let me build it, the error is this:
FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':baronha_react-native-photo-editor:compileDebugKotlin'.

Compilation error. See log for more details

• Try:

Run with --stacktrace option to get the stack trace.
Run with --info or --debug option to get more log output.
Run with --scan to get full insights.

• Get more help at https://help.gradle.org

publish builds with releases ?

assuming this is not a library, could you publish apk releases ? it would make it easy for me to install and update, thanks

How to use luts

Hi there,
I'm trying to embed the editor into my app.
The editor does work but there are no filters available besides the default "normal".
I think I have put the LUTS files under /ios/LUTs as the example does.

Am I missing something?

Not open a local image by uri

On IOS I can not open the photo editor by .open() when I use local path URI ( it works by remote URL )

example: path: "file:///Users/abc/Library/Developer/CoreSimulator/Devices/EEA5C63E-7295-4A7A-B170-44827A3648C8/data/Containers/Data/Application/773955FB-5A11-4C0C-9744-C3E3DBD6AC0D/tmp/C772C64E-6113-47A3-8CCE-898E52CB0FB9.jpg"

Could you help me how to show the editor when using a URI local or captured by the camera?

Validation issue

we are not able to check if the image is edited or not

requiresMainQueueSetup warning

Module PhotoEditor requires main queue setup since it overrides `init` but doesn't implement `requiresMainQueueSetup`. 
In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of.

I am seeing this warning every time the app launches, please investigate.

This seems to be a solution, but I can't find which file to edit for this library.

Android Issue

Code is working for me in IOS, but not Android receiving message while using example code:

Null cannot be cast to non-null type com.facebook.react.bridge.readableArray

Image size

After editing an image..Image size getting larger. 4x

how can i link package manually on Android

since i got this comment "Cannot read property 'open' of null" when using .open() method on Android , while it is doing well in ios.