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

Related tags

GUI react-native-photo-editor
Overview

React Native Photo Editor (RNPE)

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

Note

The difference between the 2 platforms is huge - Be careful when using
This lib is for personal use, so if you customize your style or change something, Please fork this library and check the detailed documentation in the original library:

During the development of this package. I was thinking of moving it as part of an earlier library that I finished. If the support community for this library was large enough, I would have to dismiss this idea immediately.

Feature 🙈

iOS

Android

  • Drawing on image with option to change its Brush's Color, Size, Opacity, Erasing and basic shapes.
  • Apply Filter Effect on image using MediaEffect
  • Adding/Editing Text with option to change its Color with Custom Fonts.
  • Adding Emoji with Custom Emoji Fonts.
  • Adding Images/Stickers
  • Pinch to Scale and Rotate views.
  • Undo and Redo for Brush and Views.
  • Deleting Views

ScreenShot 👉 👈

iOS Android

Requirements

  • Swift 5.3 (Xcode12.4+)
  • iOS 12+

Installation

yarn add @baronha/react-native-photo-editor && cd ios/ && pod install && cd..

Don't forget add file .swift in your project (and create bridging header file swift).

Usage

import PhotoEditor from "@baronha/react-native-photo-editor";

// ...

const result = await PhotoEditor.open(Options);

Options

Property Type Default value Platform Description
uri string required both Local image path

Filters 🦋

iOS Android

Custom Filters(iOS)

LUT (Hald image)

How to create cube data from LUT Image

We can download the neutral LUT image from lutCreator.js.

Hald Images

Hald is a graphical representation of 3D LUT in a form of a color table which contains all of the color gradations of 3D LUT. If Hald is loaded into editing software and a color correction is applied to it, you can use 3D LUT Creator to convert your Hald into 3D LUT and apply it to a photo or a video in your editor.

Detailed documentations are available on here

IMPORTANT You have to copy this folder and paste in Xcode root folder See Example

To Do

  • Customize.
  • Sync between two platforms.

Performance

We're trying to improve performance. If you have a better solution, please open a issue or pull request. Best regards!

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

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

    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.

    opened by grvsingh789 5
  • 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

    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.

    opened by wilsontwm 4
  • Issue compiling on xcode 12.4

    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"

    opened by jonotrybe 2
  • requiresMainQueueSetup warning

    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.

    opened by kockok 1
  • Example project - Unable to resolve @babel/runtime (iOS)

    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

    Снимок экрана 2021-11-28 в 20 08 09

    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

    opened by vladimirevstratov 1
  • How to use luts

    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.

    image

    Am I missing something?

    opened by chitosai 1
  • Problem facing in installation

    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'

    opened by aloksingh0308 1
  • Not open a local image by uri

    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?

    opened by windcloudit 0
  • Android crashing after edit and hit save button

    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)

    Screenshot 2022-11-29 at 10 44 44 AM

    I see same issue in native library too => https://github.com/burhanrashid52/PhotoEditor/issues/374 Can you look into this please @baronha

    opened by mahmed101 0
  • Error when building or after installing the library: Task :@baronha_react-native-photo-editor:compileReleaseKotlin FAILED

    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
    opened by Groisa 0
Releases(v1.1.2)
Owner
Baron Ha.
Baron Ha.
GitHub
Markdown editor control for JavaFX

An advanced markdown-editor control for JavaFX.

Daniel Gyoerffy 23 Dec 28, 2022
A java based course editor for the AutoDrive mod, works with both the FS19 + FS22 versions of the mod

Java Java version greater than 13 is required. JRE or JDK are both possible. Current Java versions can be downloaded here: https://www.oracle.com/java

null 47 Jan 1, 2023
Yet another very simple java 3D software renderer using only standard 2D libraries (Java2D, AWT & Swing). Video: https://youtu.be/hWUX1t9f6zE

Another very simple 3D software renderer Another very simple 3D software renderer implemented in java using only standard libraries (java 2D, AWT & Sw

Leo 13 Oct 17, 2022
An image annotation desktop-application written in Java using the JavaFX application platform.

This is an image annotation desktop-application written in Java using the JavaFX application platform. It allows you to create bounding box annotations using rectangular and polygonal shapes. Annotations can be imported and saved from/to JSON files, Pascal VOC format XML-files or YOLO format TXT-files.

Markus Fleischhacker 31 Dec 4, 2022
Android Resource Manager application to manage and analysis your app resources with many features like image resize, Color, Dimens and code Analysis

AndroidResourceManager Cross-Platform tools to manage your resources as an Android Developer, AndroidResourceManager - ARM provide five main services

Amr Hesham 26 Nov 16, 2022
:icecream: iOS frosty/translucent effect to JavaFX

FroXty is JavaFX library which replicates the famous iOS translucent effect with ease. Set-up FroXty can be imported into your project either by downl

Giorgio Garofalo 33 Dec 11, 2022
A collection of tools and libraries for easier development on the JavaFX platform!

This project is archived I do not realistically have the time to take care of this project, unfortunately. It originally was built along a Twitter cli

Tristan Deloche 100 Dec 13, 2022
Flash cards app using JavaFX, Scene Builder and persistence using Serialization with JAVA IO API

Flashcards - JavaFX , Scene Builder, Serialized Persistence JAVA IO API Main Scene that will show all the Decks in Flash Card App Add or Edit Cards in

Ali Raja 3 Nov 28, 2022
Experimenting with awesome React Native + Expo features.

Expo Mega Demo Experimenting with new awesome React Native + Expo features. Work in progress. More info soon. A preview video (click the image): Core

Bartłomiej Klocek 137 Dec 29, 2022
Lobby System Template for a multiplayer java game, with chat and other features, using JavaFX and socket TCP (will be extended to UDP).

JavaFX-MultiplayerLobbySystem JavaFX lobby system for multiplayer games with chat, ready toggle and kick buttons, using socket TCP by default. Demo Cr

Michele Righi 7 May 8, 2022
CSGO cheat made in Java using JavaFX as the overlay and JNA for memory manipulation

CSGO-CHEAT CSGO cheat made in Java using JavaFX as the overlay and JNA for memory manipulation FEATURES RCS Triggerbot No Flash Third Person Rank Reve

Notorious 9 Dec 28, 2022
The snake and Ladders Game 🎲 for two players made using JavaFx with important concepts of OOPs🐍 🪜

The snake and Ladders Game made using JavaFx with important concepts of OOPs, done as a project for Advanced Programming course (CSE201) under Prof. Koteswar Rao Jerripothula

null 2 Sep 5, 2022
A GUI-based file manager based on a Java file management and I/O framework using object-oriented programming ideas.

FileManager A GUI-based file manager based on a Java file management and I/O framework using object-oriented programming ideas. Enables folder creatio

Zongyu Wu 4 Feb 7, 2022
A simple desktop application with minimalistic UI capable of maintaining a file based database of movies presenting the opportunity of adding and transferring movies for production companies using a TCP client-server architecture.

MovieMania-2022-JavaFX-Term-Project-L1T2 A simple desktop application with minimalistic UI capable of maintaining a file based database of movies pres

null 4 Oct 21, 2022
Tray Icon implementation for JavaFX applications. Say goodbye to using AWT's SystemTray icon, instead use a JavaFX Tray Icon.

FXTrayIcon Library intended for use in JavaFX applications that makes adding a System Tray icon easier. The FXTrayIcon class handles all the messy AWT

Dustin Redmond 248 Dec 30, 2022
TMU is very simple app for posting your digital manga as article into Telegraph for further reading using any browser or in Telegram with Instant View.

TMU is very simple app for posting your digital manga as article into Telegraph for further reading using any browser or in Telegram with Instant View. App may be very helpful for content translators that searching easy way to share their work.

null 5 Oct 6, 2022
Example of using the TestFX library to perform E2E tests in a Maven project

demoTestFX Ejemplo de uso de la librería TestFX para realizar pruebas E2E en un proyecto Maven. El principal problema para conseguir ejecutar los test

null 1 Jan 28, 2022
Tool for creating custom GUIs using packets.

Tool for creating custom GUIs using packets.

Geo3gamer 0 Feb 14, 2022
A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations.

⚡ A powerful & easy to use chart library for Android ⚡ Charts is the iOS version of this library Table of Contents Quick Start Gradle Maven Documentat

Philipp Jahoda 36k Jan 9, 2023